@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental 1.33.1 → 1.33.2

package/dist/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.33.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.33.1...v1.33.2) (2026-02-17)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.33.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.33.0...v1.33.1) (2026-02-17)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/feature-react-agentforce-conversation-client/package-lock.json

@@ -8,7 +8,7 @@
       "name": "base-react-app",
       "version": "1.0.0",
       "dependencies": {
-        "@salesforce/agentforce-conversation-client": "^1.33.0",
+        "@salesforce/agentforce-conversation-client": "^1.33.1",
         "@salesforce/webapp-experimental": "*",
         "@tailwindcss/vite": "^4.1.17",
         "react": "^19.2.0",
@@ -1863,9 +1863,9 @@
       ]
     },
     "node_modules/@salesforce/agentforce-conversation-client": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/@salesforce/agentforce-conversation-client/-/agentforce-conversation-client-1.33.0.tgz",
-      "integrity": "sha512-KYRtnGpUO2LeLqFAXiW0/4aJVDnW0JFkCJwkB7o/QGFlR/9LKGGUDNxGIgypAy6TnTHo6gRCL4EV46O0NF+rhQ==",
+      "version": "1.33.1",
+      "resolved": "https://registry.npmjs.org/@salesforce/agentforce-conversation-client/-/agentforce-conversation-client-1.33.1.tgz",
+      "integrity": "sha512-Su/L1lqsGZwh1ellGXNgoZYr6K2cwR2/dw+N0j3dC1KFW/essABmwb6W4fE2pjCdd5eVup3jvIjKkI/i2YGphg==",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@lightning-out/application": "2.1.1-rc.2"

package/dist/force-app/main/default/webapplications/feature-react-agentforce-conversation-client/package.json

@@ -12,7 +12,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@salesforce/agentforce-conversation-client": "^1.33.0",
+    "@salesforce/agentforce-conversation-client": "^1.33.1",
     "@salesforce/webapp-experimental": "*",
     "@tailwindcss/vite": "^4.1.17",
     "react": "^19.2.0",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.33.1",
+  "version": "1.33.2",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental",
-  "version": "1.33.1",
+  "version": "1.33.2",
   "description": "Embedded Agentforce conversation client feature for web applications",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -16,7 +16,9 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "rules",
+    "skills"
   ],
   "publishConfig": {
     "access": "public"
@@ -35,5 +37,5 @@
     "react-dom": "^19.2.1",
     "react-router": "^7.10.1"
   },
-  "gitHead": "42f151f1111c4ad30eb13327e62076a96f2d1110"
+  "gitHead": "bb8bb09df420bd823e210e09cf45a4bd8a4c4922"
 }

package/rules/embedded-agent-rule.md

@@ -0,0 +1,32 @@
+---
+paths:
+  - "**/*.tsx"
+  - "**/components/**/*.ts"
+---
+
+# Agentforce Conversation Client (standards)
+
+When adding or editing the embedded Agentforce chat client in this project, follow these conventions.
+
+## Component and library
+
+- Use the shared **AgentforceConversationClient** React component from `feature-react-agentforce-conversation-client`. Do not call `embedAgentforceClient` directly in application code.
+- The project must have **@salesforce/agentforce-conversation-client** installed (`npm install @salesforce/agentforce-conversation-client`).
+
+## Authentication
+
+- The component resolves auth automatically: **localhost** fetches `frontdoorUrl` from `/__lo/frontdoor`; **production** uses `window.location.origin` as `salesforceOrigin`.
+- Do not hard-code `salesforceOrigin` or `frontdoorUrl` unless the consumer explicitly provides them as props.
+
+## Rendering mode
+
+- Pass `agentforceClientConfig.renderingConfig.mode` to select **floating** (default) or **inline**. Do not apply custom positioning CSS to override the built-in layout.
+- For inline mode, set `width` and `height` in `renderingConfig`. Do not override iframe dimensions with external CSS.
+
+## Agent selection
+
+- Use `agentforceClientConfig.agentId` to select a specific agent. Ask the user for the agent ID; if not provided, note that the org's default agent is used.
+
+## Placement
+
+- Render `<AgentforceConversationClient />` inside the existing app layout (e.g. alongside `<Outlet />`). Do not replace the entire page shell with the chat client.

package/skills/embedded-agent/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: embedded-agent
+description: Embed an Agentforce conversation client (chat UI) into a React web application. Use when the user wants to add an employee agent, a chat client, chatbot, chat widget, chat component, conversation client, or conversational interface to their React app. Also applies when the user asks to embed or integrate any Salesforce agent — including employee agent, travel agent, HR agent, service agent, or any custom-named agent — or mentions Agentforce, Agentforce widget, Agentforce chat, or agent chat.
+---
+
+# Embedded Agentforce chat (workflow)
+
+When the user wants an embedded Agentforce chat client in a React app, follow this workflow.
+
+## 1. Install the dependency
+
+```bash
+npm install @salesforce/agentforce-conversation-client
+```
+
+The dependency should be added to the project's `package.json` dependencies.
+
+## 2. Add the feature
+
+- Include `@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental` in the app configuration.
+- This feature provides **AgentforceConversationClient**.
+
+## 3. Use the shared wrapper
+
+Use the `AgentforceConversationClient` React component. It resolves auth automatically:
+
+- **Dev (localhost)**: fetches `frontdoorUrl` from `/__lo/frontdoor`
+- **Prod (hosted in org)**: uses `salesforceOrigin` from `window.location.origin`
+
+## 4. Embed in the layout
+
+Render `<AgentforceConversationClient />` in the app layout so the chat client loads globally. Keep it alongside the existing layout (do not replace the page shell).
+
+```tsx
+import { Outlet } from "react-router";
+import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";
+
+export default function AppLayout() {
+  return (
+    <>
+      <Outlet />
+      <AgentforceConversationClient />
+    </>
+  );
+}
+```
+
+## 5. Configure the agent
+
+Pass options via the `agentforceClientConfig` prop:
+
+| Option                             | Purpose                                           |
+| ---------------------------------- | ------------------------------------------------- |
+| `renderingConfig.mode`             | `"floating"` (default) or `"inline"`              |
+| `renderingConfig.width` / `height` | Inline dimensions (number for px, string for CSS) |
+| `agentId`                          | Select a specific agent from the org              |
+| `styleTokens`                      | Theme colors and style overrides                  |
+
+See [embed-examples.md](docs/embed-examples.md) for complete examples of each mode.
+
+## 6. Validate prerequisites
+
+- The org must allow `localhost:<PORT>` in **Trusted Domains for Inline Frames** (session settings).
+
+## Quick reference: rendering modes
+
+### Floating (default)
+
+A persistent chat widget overlay pinned to the bottom-right corner. No extra config needed — floating is the default.
+
+```tsx
+<AgentforceConversationClient />
+```
+
+### Inline
+
+The chat renders within the page layout at a specific size.
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "inline", width: 420, height: 600 },
+  }}
+/>
+```
+
+### Theming
+
+Use `styleTokens` to customize the chat appearance.
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+      messageBlockInboundColor: "#0176d3",
+    },
+  }}
+/>
+```
+
+### Agent selection
+
+Pass `agentId` to load a specific agent (e.g. travel agent, HR agent).
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    agentId: "0Xx000000000000",
+  }}
+/>
+```

package/skills/embedded-agent/docs/embed-examples.md

@@ -0,0 +1,182 @@
+# Embed examples
+
+Detailed examples for configuring the Agentforce Conversation Client. All examples use the `AgentforceConversationClient` React component; the underlying `embedAgentforceClient` API accepts the same `agentforceClientConfig` shape.
+
+---
+
+## Floating mode (default)
+
+A floating chat widget appears in the bottom-right corner. It starts minimized and expands when the user clicks it. This is the default — no `renderingConfig` is required.
+
+### Minimal (no config)
+
+```tsx
+<AgentforceConversationClient />
+```
+
+### Explicit floating
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "floating" },
+  }}
+/>
+```
+
+### Floating with a specific agent and theme
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "floating" },
+    agentId: "0Xx000000000000",
+    styleTokens: {
+      headerBlockBackground: "#032D60",
+      headerBlockTextColor: "#ffffff",
+    },
+  }}
+/>
+```
+
+---
+
+## Inline mode
+
+The chat renders inside the parent container at a specific size. Use this when the chat should be part of the page layout rather than an overlay.
+
+### Fixed pixel dimensions
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "inline", width: 420, height: 600 },
+  }}
+/>
+```
+
+### CSS string dimensions
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "inline", width: "100%", height: "80vh" },
+  }}
+/>
+```
+
+### Inline filling a sidebar
+
+```tsx
+<div style={{ display: "flex", height: "100vh" }}>
+  <main style={{ flex: 1 }}>{/* App content */}</main>
+  <aside style={{ width: 400 }}>
+    <AgentforceConversationClient
+      agentforceClientConfig={{
+        renderingConfig: { mode: "inline", width: "100%", height: "100%" },
+      }}
+    />
+  </aside>
+</div>
+```
+
+---
+
+## Theming
+
+Use `styleTokens` to customize colors. Tokens are passed directly to the Agentforce client.
+
+### Brand-colored header
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+    },
+  }}
+/>
+```
+
+### Full theme example
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+      messageBlockInboundColor: "#0176d3",
+    },
+  }}
+/>
+```
+
+### Dark theme example
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    styleTokens: {
+      headerBlockBackground: "#1a1a2e",
+      headerBlockTextColor: "#e0e0e0",
+      messageBlockInboundColor: "#16213e",
+    },
+  }}
+/>
+```
+
+---
+
+## Agent selection
+
+Use `agentId` to load a specific agent from the org. If omitted, the org's default employee agent is used.
+
+### Specific agent by ID
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    agentId: "0Xx000000000000",
+  }}
+/>
+```
+
+### Agent with inline mode and theming
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    agentId: "0Xx000000000000",
+    renderingConfig: { mode: "inline", width: 400, height: 700 },
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+    },
+  }}
+/>
+```
+
+---
+
+## Using the low-level `embedAgentforceClient` API
+
+The React component wraps `embedAgentforceClient`. If you need the raw API (e.g. in a non-React context), the config shape is the same:
+
+```ts
+import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
+
+const { loApp, chatClientComponent } = embedAgentforceClient({
+  container: "#agentforce-container",
+  salesforceOrigin: "https://myorg.my.salesforce.com",
+  agentforceClientConfig: {
+    agentId: "0Xx000000000000",
+    renderingConfig: { mode: "floating" },
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+    },
+  },
+});
+```