@salesforce/webapp-template-app-react-template-b2e-experimental 1.43.0 → 1.43.1

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/package.json

@@ -14,22 +14,14 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.2.4",
+    "@salesforce/agentforce-conversation-client": "^1.43.0",
     "@salesforce/sdk-data": "^1.11.2",
     "@salesforce/webapp-experimental": "*",
     "@tailwindcss/vite": "^4.1.17",
-    "@tanstack/react-form": "^1.28.3",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.562.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router": "^7.10.1",
-    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.1.17",
-    "zod": "^4.3.6"
+    "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/app.tsx

@@ -1,16 +1,22 @@
-import { createBrowserRouter, RouterProvider } from "react-router";
-import { routes } from "@/routes";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { AuthProvider } from "./context/AuthContext";
-import "./styles/global.css";
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import { routes } from '@/routes';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles/global.css';
 
-const router = createBrowserRouter(routes);
+// Match Vite base so client-side routes work when deployed under a path (e.g. /lwr/application/ai/c-webapp2/).
+// When served at root (e.g. e2e with static serve), use '/' so routes match.
+const base = (import.meta.env.BASE_URL ?? '/').replace(/\/$/, '') || '/';
+const basename =
+  typeof window !== 'undefined' &&
+  (window.location.pathname === '/' ||
+    !window.location.pathname.startsWith('/lwr/'))
+    ? '/'
+    : base;
+const router = createBrowserRouter(routes, { basename });
 
-createRoot(document.getElementById("root")!).render(
-	<StrictMode>
-		<AuthProvider>
-			<RouterProvider router={router} />
-		</AuthProvider>
-	</StrictMode>,
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>
 );

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/appLayout.tsx

@@ -1,11 +1,19 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
 import { Outlet } from "react-router";
 import NavigationMenu from "./navigationMenu";
+import AgentforceConversationClient from "./components/AgentforceConversationClient";
 
-export default function AppLayout() {
+export default function AppLayout(): React.ReactElement {
 	return (
 		<>
 			<NavigationMenu />
 			<Outlet />
+			<AgentforceConversationClient />
 		</>
 	);
 }

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/components/AgentforceConversationClient.tsx

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
+import { useEffect } from "react";
+import type {
+	ResolvedEmbedOptions,
+	AgentforceConversationClientProps,
+} from "../types/conversation";
+
+const GLOBAL_HOST_ID = "agentforce-conversation-client-global-host";
+const SINGLETON_KEY = "__agentforceConversationClientSingleton";
+
+interface AgentforceConversationClientSingleton {
+	initPromise?: Promise<void>;
+	initialized: boolean;
+}
+
+interface WindowWithAgentforceSingleton extends Window {
+	[SINGLETON_KEY]?: AgentforceConversationClientSingleton;
+}
+
+function getSingleton(): AgentforceConversationClientSingleton {
+	const win = window as WindowWithAgentforceSingleton;
+	if (!win[SINGLETON_KEY]) {
+		win[SINGLETON_KEY] = {
+			initialized: false,
+		};
+	}
+	return win[SINGLETON_KEY]!;
+}
+
+function getOrCreateGlobalHost(): HTMLDivElement {
+	let host = document.getElementById(GLOBAL_HOST_ID) as HTMLDivElement | null;
+	if (!host) {
+		host = document.createElement("div");
+		host.id = GLOBAL_HOST_ID;
+		document.body.appendChild(host);
+	}
+	return host;
+}
+
+function getDefaultEmbedOptions(): ResolvedEmbedOptions {
+	return { salesforceOrigin: window.location.origin };
+}
+
+/**
+ * React wrapper that embeds the Agentforce Conversation Client (copilot/agent UI)
+ * using Lightning Out. Requires a valid Salesforce session for the given org.
+ * Config is passed through from the consumer to the embed client as-is.
+ */
+export function AgentforceConversationClient({
+	agentforceClientConfig,
+	salesforceOrigin,
+	frontdoorUrl,
+}: AgentforceConversationClientProps) {
+	useEffect(() => {
+		const singleton = getSingleton();
+		if (singleton.initialized || singleton.initPromise) {
+			return;
+		}
+
+		const initialize = (options: ResolvedEmbedOptions) => {
+			// If already initialized while this flow was in progress, no-op.
+			if (singleton.initialized) {
+				return;
+			}
+			const existingEmbed = document.querySelector('lightning-out-application[data-lo="acc"]');
+			if (existingEmbed) {
+				singleton.initialized = true;
+				return;
+			}
+			const host = getOrCreateGlobalHost();
+
+			embedAgentforceClient({
+				container: host,
+				salesforceOrigin: salesforceOrigin ?? options.salesforceOrigin,
+				frontdoorUrl: frontdoorUrl ?? options.frontdoorUrl,
+				agentforceClientConfig: agentforceClientConfig,
+			});
+			singleton.initialized = true;
+		};
+
+		const shouldFetchFrontdoor = window.location.hostname === "localhost";
+
+		if (shouldFetchFrontdoor) {
+			singleton.initPromise = fetch("/__lo/frontdoor")
+				.then(async (res) => {
+					if (!res.ok) {
+						console.error("frontdoor fetch failed");
+						return;
+					}
+					const { frontdoorUrl: resolvedFrontdoorUrl } = await res.json();
+					initialize({ frontdoorUrl: resolvedFrontdoorUrl });
+				})
+				.catch((err) => {
+					console.error("AgentforceConversationClient: failed to fetch frontdoor URL", err);
+				})
+				.finally(() => {
+					singleton.initPromise = undefined;
+				});
+		} else {
+			singleton.initPromise = Promise.resolve()
+				.then(() => {
+					initialize(getDefaultEmbedOptions());
+				})
+				.catch((err) => {
+					console.error("AgentforceConversationClient: failed to embed Agentforce client", err);
+				})
+				.finally(() => {
+					singleton.initPromise = undefined;
+				});
+		}
+
+		return () => {
+			// Intentionally no cleanup:
+			// This component guarantees a single LO initialization per window.
+		};
+	}, [salesforceOrigin, frontdoorUrl, agentforceClientConfig]);
+
+	return null;
+}
+
+export default AgentforceConversationClient;

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * feature-react-agentforce-conversation-client – ACC Conversation Client
+ */
+
+export { AgentforceConversationClient } from "./components/AgentforceConversationClient";
+export type { AgentforceConversationClientProps, ResolvedEmbedOptions } from "./types/conversation";

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/navigationMenu.tsx

@@ -1,81 +1,80 @@
-import { Link, useLocation } from "react-router";
-import { getAllRoutes } from "./router-utils";
-import { useState } from "react";
+import { Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
 
 export default function NavigationMenu() {
-	const [isOpen, setIsOpen] = useState(false);
-	const location = useLocation();
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
 
-	const isActive = (path: string) => location.pathname === path;
+  const isActive = (path: string) => location.pathname === path;
 
-	const toggleMenu = () => setIsOpen(!isOpen);
+  const toggleMenu = () => setIsOpen(!isOpen);
 
-	// Get all route configs and filter by showInNavigation
-	const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
-		.filter(
-			(route) =>
-				route.handle?.showInNavigation === true &&
-				route.fullPath !== undefined &&
-				route.handle?.label !== undefined,
-		)
-		.map(
-			(route) =>
-				({
-					path: route.fullPath,
-					label: route.handle?.label,
-				}) as { path: string; label: string },
-		);
+  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+    .filter(
+      route =>
+        route.handle?.showInNavigation === true &&
+        route.fullPath !== undefined &&
+        route.handle?.label !== undefined
+    )
+    .map(
+      route =>
+        ({
+          path: route.fullPath,
+          label: route.handle?.label,
+        }) as { path: string; label: string }
+    );
 
-	return (
-		<nav className="bg-white border-b border-gray-200">
-			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-				<div className="flex justify-between items-center h-16">
-					<Link to="/" className="text-xl font-semibold text-gray-900">
-						React App
-					</Link>
-					<button
-						onClick={toggleMenu}
-						className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-						aria-label="Toggle menu"
-					>
-						<div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
-							<span
-								className={`block h-0.5 w-6 bg-current transition-all ${
-									isOpen ? "rotate-45 translate-y-2" : ""
-								}`}
-							/>
-							<span
-								className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? "opacity-0" : ""}`}
-							/>
-							<span
-								className={`block h-0.5 w-6 bg-current transition-all ${
-									isOpen ? "-rotate-45 -translate-y-2" : ""
-								}`}
-							/>
-						</div>
-					</button>
-				</div>
-				{isOpen && (
-					<div className="pb-4">
-						<div className="flex flex-col space-y-2">
-							{navigationRoutes.map((item) => (
-								<Link
-									key={item.path}
-									to={item.path}
-									onClick={() => setIsOpen(false)}
-									className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-										isActive(item.path)
-											? "bg-blue-100 text-blue-700"
-											: "text-gray-700 hover:bg-gray-100"
-									}`}
-								>
-									{item.label}
-								</Link>
-							))}
-						</div>
-					</div>
-				)}
-			</div>
-		</nav>
-	);
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            React App
+          </Link>
+          <button
+            onClick={toggleMenu}
+            className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="pb-4">
+            <div className="flex flex-col space-y-2">
+              {navigationRoutes.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
 }

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/router-utils.tsx

@@ -1,34 +1,35 @@
-import type { RouteObject } from "react-router";
-import { routes } from "./routes";
+import type { RouteObject } from 'react-router';
+import { routes } from './routes';
 
 export type RouteWithFullPath = RouteObject & { fullPath: string };
 
-const flatMapRoutes = (route: RouteObject, parentPath: string = ""): RouteWithFullPath[] => {
-	// Construct the full path for this route
-	let fullPath: string;
+const flatMapRoutes = (
+  route: RouteObject,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  let fullPath: string;
 
-	if (route.index) {
-		// Index routes use the parent path
-		fullPath = parentPath || "/";
-	} else if (route.path) {
-		// Combine parent path with current path
-		if (route.path.startsWith("/")) {
-			fullPath = route.path;
-		} else {
-			fullPath = parentPath === "/" ? `/${route.path}` : `${parentPath}/${route.path}`;
-		}
-	} else {
-		fullPath = parentPath;
-	}
+  if (route.index) {
+    fullPath = parentPath || '/';
+  } else if (route.path) {
+    if (route.path.startsWith('/')) {
+      fullPath = route.path;
+    } else {
+      fullPath =
+        parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
+    }
+  } else {
+    fullPath = parentPath;
+  }
 
-	const routeWithPath = { ...route, fullPath };
+  const routeWithPath = { ...route, fullPath };
 
-	// Recursively process children
-	const childRoutes = route.children?.flatMap((child) => flatMapRoutes(child, fullPath)) || [];
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
 
-	return [routeWithPath, ...childRoutes];
+  return [routeWithPath, ...childRoutes];
 };
 
 export const getAllRoutes = (): RouteWithFullPath[] => {
-	return routes.flatMap((route) => flatMapRoutes(route));
+  return routes.flatMap(route => flatMapRoutes(route));
 };

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/routes.tsx

@@ -1,18 +1,7 @@
 import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
 import Home from './pages/Home';
-import About from './pages/About';
 import NotFound from './pages/NotFound';
-import Login from "./pages/Login";
-import Register from "./pages/Register";
-import ForgotPassword from "./pages/ForgotPassword";
-import ResetPassword from "./pages/ResetPassword";
-import Profile from "./pages/Profile";
-import ChangePassword from "./pages/ChangePassword";
-import AuthenticationRoute from "./components/auth/authentication-route";
-import PrivateRoute from "./components/auth/private-route";
-import { ROUTES } from "./utils/authenticationConfig";
-import New from "./pages/new";
 
 export const routes: RouteObject[] = [
   {
@@ -24,64 +13,9 @@ export const routes: RouteObject[] = [
         element: <Home />,
         handle: { showInNavigation: true, label: 'Home' }
       },
-      {
-        path: "about",
-        element: <About />,
-        handle: { showInNavigation: true, label: "About" }
-      },
       {
         path: '*',
         element: <NotFound />
-      },
-      {
-        element: <AuthenticationRoute />,
-        children: [
-          {
-            path: ROUTES.LOGIN.PATH,
-            element: <Login />,
-            handle: { showInNavigation: true, label: "Login", title: ROUTES.LOGIN.TITLE }
-          },
-          {
-            path: ROUTES.REGISTER.PATH,
-            element: <Register />,
-            handle: { showInNavigation: false, title: ROUTES.REGISTER.TITLE }
-          },
-          {
-            path: ROUTES.FORGOT_PASSWORD.PATH,
-            element: <ForgotPassword />,
-            handle: { showInNavigation: false, title: ROUTES.FORGOT_PASSWORD.TITLE }
-          },
-          {
-            path: ROUTES.RESET_PASSWORD.PATH,
-            element: <ResetPassword />,
-            handle: { showInNavigation: false, title: ROUTES.RESET_PASSWORD.TITLE }
-          }
-        ]
-      },
-      {
-        element: <PrivateRoute />,
-        children: [
-          {
-            path: ROUTES.PROFILE.PATH,
-            element: <Profile />,
-            handle: { showInNavigation: true, label: "Profile", title: ROUTES.PROFILE.TITLE }
-          },
-          {
-            path: ROUTES.CHANGE_PASSWORD.PATH,
-            element: <ChangePassword />,
-            handle: { showInNavigation: false, title: ROUTES.CHANGE_PASSWORD.TITLE }
-          }
-        ]
-      },
-      {
-        path: "contact",
-        element: <h1>Hello World from Contact Page</h1>,
-        handle: { showInNavigation: false }
-      },
-      {
-        path: "new",
-        element: <New />,
-        handle: { showInNavigation: true, label: "New Page" }
       }
     ]
   }

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/styles/global.css

@@ -1,132 +1,13 @@
-@import "tailwindcss";
-
-:root {
-	color-scheme: light;
-	--radius: 0.625rem;
-	--spacing: 0.25rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-	color-scheme: dark;
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.269 0 0);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.371 0 0);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.439 0 0);
-}
+@import 'tailwindcss';
 
 @layer base {
-	@media (prefers-reduced-motion: reduce) {
-		* {
-			animation-duration: 0.01ms !important;
-			animation-iteration-count: 1 !important;
-			transition-duration: 0.01ms !important;
-			scroll-behavior: auto !important;
-		}
-	}
-	* {
-		@apply border-[var(--border)];
-	}
-	body {
-		@apply bg-[var(--background)] text-[var(--foreground)] antialiased;
-	}
-}
-
-@theme inline {
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-destructive-foreground: var(--destructive-foreground);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--color-chart-1: var(--chart-1);
-	--color-chart-2: var(--chart-2);
-	--color-chart-3: var(--chart-3);
-	--color-chart-4: var(--chart-4);
-	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
-	--spacing: var(--spacing);
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
 }