diff --git a/apps/jetpackme-support/README.md b/apps/jetpackme-support/README.md
new file mode 100644
index 0000000000000..281c66f9c5a3e
--- /dev/null
+++ b/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
+```
diff --git a/apps/jetpackme-support/package.json b/apps/jetpackme-support/package.json
new file mode 100644
index 0000000000000..41ccb2df3c7b3
--- /dev/null
+++ b/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
+}
diff --git a/apps/jetpackme-support/src/index.js b/apps/jetpackme-support/src/index.js
new file mode 100644
index 0000000000000..80e0325f46943
--- /dev/null
+++ b/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(
+
+
+ ,
+ document.getElementById( elementId )
+ );
+};
diff --git a/apps/jetpackme-support/src/support-prompt/index.js b/apps/jetpackme-support/src/support-prompt/index.js
new file mode 100644
index 0000000000000..4405bb39e7bfd
--- /dev/null
+++ b/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 (
+
+
+
+ clearChat() }
+ onKeyPress={ () => clearChat() }
+ className="menu-item-class"
+ >
+ Start a New Chat
+
+
+
+
+
+ );
+};
+
+export default SupportPrompt;
diff --git a/apps/jetpackme-support/webpack.config.js b/apps/jetpackme-support/webpack.config.js
new file mode 100644
index 0000000000000..da6c0b33180a4
--- /dev/null
+++ b/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;
diff --git a/packages/wpcom-proxy-request/src/index.js b/packages/wpcom-proxy-request/src/index.js
index 896d6ec4a8283..48358ab8add4e 100644
--- a/packages/wpcom-proxy-request/src/index.js
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index d74183831903e..3a8d1a73df33e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1236,6 +1236,34 @@ __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:^"
+ "@tanstack/react-query": "npm:^5.15.5"
+ "@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"
@@ -11939,21 +11967,21 @@ __metadata:
languageName: node
linkType: hard
-"autoprefixer@npm:^10.2.5":
- version: 10.2.5
- resolution: "autoprefixer@npm:10.2.5"
+"autoprefixer@npm:^10.2.5, autoprefixer@npm:^10.4.20":
+ version: 10.4.20
+ resolution: "autoprefixer@npm:10.4.20"
dependencies:
- browserslist: "npm:^4.16.3"
- caniuse-lite: "npm:^1.0.30001196"
- colorette: "npm:^1.2.2"
- fraction.js: "npm:^4.0.13"
+ browserslist: "npm:^4.23.3"
+ caniuse-lite: "npm:^1.0.30001646"
+ fraction.js: "npm:^4.3.7"
normalize-range: "npm:^0.1.2"
- postcss-value-parser: "npm:^4.1.0"
+ picocolors: "npm:^1.0.1"
+ postcss-value-parser: "npm:^4.2.0"
peerDependencies:
postcss: ^8.1.0
bin:
autoprefixer: bin/autoprefixer
- checksum: 77eea8d366a70abbb99cdda2fdd1c515891e077d2d2fa80505cc0fd38d2813db8237590c971f09b62ab5f37f479b35992edfcd09d4399ba8a0285853cbabc345
+ checksum: e1f00978a26e7c5b54ab12036d8c13833fad7222828fc90914771b1263f51b28c7ddb5803049de4e77696cbd02bb25cfc3634e80533025bb26c26aacdf938940
languageName: node
linkType: hard
@@ -12589,7 +12617,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.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:
@@ -13302,7 +13330,7 @@ __metadata:
languageName: node
linkType: hard
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001196, caniuse-lite@npm:^1.0.30001646":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001646":
version: 1.0.30001651
resolution: "caniuse-lite@npm:1.0.30001651"
checksum: 7821278952a6dbd17358e5d08083d258f092e2a530f5bc1840657cb140fbbc5ec44293bc888258c44a18a9570cde149ed05819ac8320b9710cf22f699891e6ad
@@ -14011,7 +14039,7 @@ __metadata:
languageName: node
linkType: hard
-"colorette@npm:^1.2.1, colorette@npm:^1.2.2":
+"colorette@npm:^1.2.1":
version: 1.4.0
resolution: "colorette@npm:1.4.0"
checksum: 4955c8f7daafca8ae7081d672e4bd89d553bd5782b5846d5a7e05effe93c2f15f7e9c0cb46f341b59f579a39fcf436241ff79594899d75d5f3460c03d607fe9e
@@ -18744,10 +18772,10 @@ __metadata:
languageName: node
linkType: hard
-"fraction.js@npm:^4.0.13":
- version: 4.1.0
- resolution: "fraction.js@npm:4.1.0"
- checksum: db0e43d60dbe9211673dd88a0ba7984a1b3b34dcefa2619e12c73e9d58106fc172f13b6e6f10af5c17f2ef6439a02fe848218ec9498d4ced7cccb7ecce42e776
+"fraction.js@npm:^4.3.7":
+ version: 4.3.7
+ resolution: "fraction.js@npm:4.3.7"
+ checksum: df291391beea9ab4c263487ffd9d17fed162dbb736982dee1379b2a8cc94e4e24e46ed508c6d278aded9080ba51872f1bc5f3a5fd8d7c74e5f105b508ac28711
languageName: node
linkType: hard
@@ -34523,7 +34551,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: