@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental 1.32.0 → 1.33.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +211 -0
- package/dist/CHANGELOG.md +16 -0
- package/dist/force-app/main/default/webapplications/feature-react-agentforce-conversation-client/package-lock.json +4 -4
- package/dist/force-app/main/default/webapplications/feature-react-agentforce-conversation-client/package.json +1 -1
- package/dist/package.json +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
# Agentforce Conversation Client (React)
|
|
2
|
+
|
|
3
|
+
React component for embedding the Agentforce Conversation Client — the Salesforce agent chat UI — into a web application. This is a wrapper around `@salesforce/agentforce-conversation-client` that handles authentication automatically and provides a declarative `<AgentforceConversationClient />` component.
|
|
4
|
+
|
|
5
|
+
Use this when a user expects to add an agent, chat widget, chatbot, conversation client, Agentforce chat, employee agent, service agent, or any Salesforce agent to their React app.
|
|
6
|
+
|
|
7
|
+
## How it works
|
|
8
|
+
|
|
9
|
+
The component embeds the Agentforce chat experience using Lightning Out 2.0. Authentication is resolved automatically:
|
|
10
|
+
|
|
11
|
+
- **Dev (localhost)**: fetches a `frontdoorUrl` from `/__lo/frontdoor`
|
|
12
|
+
- **Prod (hosted in org)**: uses `window.location.origin` as `salesforceOrigin`
|
|
13
|
+
|
|
14
|
+
## Step 1: Install dependencies
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @salesforce/agentforce-conversation-client
|
|
18
|
+
npm install @salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Step 2: Embed in the app layout
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";
|
|
25
|
+
|
|
26
|
+
export default function AppLayout() {
|
|
27
|
+
return (
|
|
28
|
+
<>
|
|
29
|
+
<Outlet />
|
|
30
|
+
<AgentforceConversationClient />
|
|
31
|
+
</>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Step 3: Configure (optional)
|
|
37
|
+
|
|
38
|
+
### Props
|
|
39
|
+
|
|
40
|
+
| Prop | Type | Required | Description |
|
|
41
|
+
| ------------------------ | ------------------------ | -------- | ------------------------------------------------------------------------------------------------------ |
|
|
42
|
+
| `agentforceClientConfig` | `AgentforceClientConfig` | No | Configuration object passed through to the embed client (agent ID, rendering mode, style tokens, etc.) |
|
|
43
|
+
| `salesforceOrigin` | `string` | No | Salesforce org origin URL. Resolved automatically if not provided. |
|
|
44
|
+
| `frontdoorUrl` | `string` | No | Frontdoor URL for authentication. Resolved automatically in dev if not provided. |
|
|
45
|
+
|
|
46
|
+
### Rendering Modes
|
|
47
|
+
|
|
48
|
+
#### Floating (default)
|
|
49
|
+
|
|
50
|
+
A persistent chat widget overlay pinned to the bottom-right corner. No extra config needed.
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
<AgentforceConversationClient />
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
#### Inline
|
|
57
|
+
|
|
58
|
+
The chat renders within the page layout at a specific size.
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
<AgentforceConversationClient
|
|
62
|
+
agentforceClientConfig={{
|
|
63
|
+
renderingConfig: { mode: "inline", width: 420, height: 600 },
|
|
64
|
+
}}
|
|
65
|
+
/>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Agent Selection
|
|
69
|
+
|
|
70
|
+
Pass `agentId` to load a specific agent (e.g. travel agent, HR agent). If not provided, the org's default agent is used.
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
<AgentforceConversationClient
|
|
74
|
+
agentforceClientConfig={{
|
|
75
|
+
agentId: "0Xx000000000000",
|
|
76
|
+
}}
|
|
77
|
+
/>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Theming with `styleTokens`
|
|
81
|
+
|
|
82
|
+
Use `agentforceClientConfig.styleTokens` to theme the Agentforce Conversation Client. Only override the tokens you need.
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
<AgentforceConversationClient
|
|
86
|
+
agentforceClientConfig={{
|
|
87
|
+
styleTokens: {
|
|
88
|
+
headerBlockBackground: "#0176d3",
|
|
89
|
+
headerBlockTextColor: "#ffffff",
|
|
90
|
+
messageBlockInboundBackgroundColor: "#0176d3",
|
|
91
|
+
},
|
|
92
|
+
}}
|
|
93
|
+
/>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
#### Available Style Tokens
|
|
97
|
+
|
|
98
|
+
##### Agentforce Header
|
|
99
|
+
|
|
100
|
+
| Token name | UI area themed |
|
|
101
|
+
| ----------------------------- | ------------------------ |
|
|
102
|
+
| `headerBlockBackground` | Header background |
|
|
103
|
+
| `headerBlockBorderColor` | Header border |
|
|
104
|
+
| `headerBlockFontFamily` | Header font family |
|
|
105
|
+
| `headerBlockTextColor` | Header text color |
|
|
106
|
+
| `headerBlockHoverBackground` | Header hover background |
|
|
107
|
+
| `headerBlockActiveBackground` | Header active background |
|
|
108
|
+
| `headerBlockFocusBorder` | Header focus border |
|
|
109
|
+
|
|
110
|
+
##### Agentforce Messages
|
|
111
|
+
|
|
112
|
+
| Token name | UI area themed |
|
|
113
|
+
| -------------------------------- | ---------------------------------- |
|
|
114
|
+
| `messageBlockBodyPaddingBottom` | Message block body bottom padding |
|
|
115
|
+
| `messageBlockTextPadding` | Message block text padding |
|
|
116
|
+
| `messageBlockPaddingContainer` | Message block container padding |
|
|
117
|
+
| `messageBlockContainerMarginTop` | Message block container top margin |
|
|
118
|
+
| `messageBlockPadding` | Message block padding |
|
|
119
|
+
| `messageBlockBorderRadius` | Message block border radius |
|
|
120
|
+
| `messageBlockFontSize` | Message block font size |
|
|
121
|
+
| `messageBlockLineHeight` | Message block line height |
|
|
122
|
+
| `messageBlockBackgroundColor` | Message block background (base) |
|
|
123
|
+
| `messageBlockBodyWidth` | Message block body width |
|
|
124
|
+
|
|
125
|
+
##### Inbound message (customer to agent)
|
|
126
|
+
|
|
127
|
+
| Token name | UI area themed |
|
|
128
|
+
| ----------------------------------------- | -------------------------------- |
|
|
129
|
+
| `messageBlockInboundHoverBackgroundColor` | Inbound message hover background |
|
|
130
|
+
| `messageBlockInboundBackgroundColor` | Inbound message background |
|
|
131
|
+
| `messageBlockInboundTextColor` | Inbound message text color |
|
|
132
|
+
| `messageBlockInboundWidth` | Inbound message width |
|
|
133
|
+
| `messageBlockInboundTextAlign` | Inbound message text alignment |
|
|
134
|
+
|
|
135
|
+
##### Outbound message (agent to customer)
|
|
136
|
+
|
|
137
|
+
| Token name | UI area themed |
|
|
138
|
+
| ------------------------------------- | ------------------------------- |
|
|
139
|
+
| `messageBlockOutboundBackgroundColor` | Outbound message background |
|
|
140
|
+
| `messageBlockOutboundTextColor` | Outbound message text color |
|
|
141
|
+
| `messageBlockOutboundWidth` | Outbound message width |
|
|
142
|
+
| `messageBlockOutboundMarginLeft` | Outbound message left margin |
|
|
143
|
+
| `messageBlockOutboundTextAlign` | Outbound message text alignment |
|
|
144
|
+
|
|
145
|
+
##### Agentforce Input
|
|
146
|
+
|
|
147
|
+
| Token name | UI area themed |
|
|
148
|
+
| ---------------------------------------- | ---------------------------------------------- |
|
|
149
|
+
| `messageInputPadding` | Message input container padding |
|
|
150
|
+
| `messageInputBorderRadius` | Message input border radius |
|
|
151
|
+
| `messageInputFooterBorderColor` | Message input footer border color |
|
|
152
|
+
| `messageInputFooterBorderFocusColor` | Message input footer focus border color |
|
|
153
|
+
| `messageInputBorderTransitionDuration` | Message input border transition duration |
|
|
154
|
+
| `messageInputBorderTransitionEasing` | Message input border transition easing |
|
|
155
|
+
| `messageInputTextColor` | Message input text color |
|
|
156
|
+
| `messageInputTextBackgroundColor` | Message input text background color |
|
|
157
|
+
| `messageInputFooterPlaceholderText` | Message input placeholder text color |
|
|
158
|
+
| `messageInputErrorTextColor` | Message input error text color |
|
|
159
|
+
| `messageInputFontSize` | Message input font size |
|
|
160
|
+
| `messageInputFontWeight` | Message input font weight |
|
|
161
|
+
| `messageInputPlaceholderFontWeight` | Placeholder font weight |
|
|
162
|
+
| `messageInputLineHeight` | Message input line height |
|
|
163
|
+
| `messageInputMaxHeight` | Message input max height |
|
|
164
|
+
| `messageInputTextPadding` | Message input text padding |
|
|
165
|
+
| `messageInputActionsWidth` | Message input actions width |
|
|
166
|
+
| `messageInputActionsPaddingRight` | Message input actions right padding |
|
|
167
|
+
| `messageInputActionsGap` | Message input actions gap |
|
|
168
|
+
| `messageInputActionsPadding` | Message input actions padding |
|
|
169
|
+
| `messageInputOverflowY` | Message input overflow Y |
|
|
170
|
+
| `messageInputScrollbarWidth` | Message input scrollbar width |
|
|
171
|
+
| `messageInputScrollbarColor` | Message input scrollbar color |
|
|
172
|
+
| `messageInputTextareaMaxHeight` | Message input textarea max height |
|
|
173
|
+
| `messageInputTextareaWithImageMaxHeight` | Message input textarea max height (with image) |
|
|
174
|
+
| `messageInputFilePreviewPadding` | Message input file preview padding |
|
|
175
|
+
| `messageInputActionButtonSize` | Message input action button size |
|
|
176
|
+
| `messageInputActionButtonRadius` | Message input action button radius |
|
|
177
|
+
| `messageInputActionButtonFocusBorder` | Message input action button focus border |
|
|
178
|
+
| `messageInputActionButtonHoverShadow` | Message input action button hover shadow |
|
|
179
|
+
| `messageInputFooterSendButton` | Message input send button color |
|
|
180
|
+
| `messageInputFooterSendButtonHoverColor` | Message input send button hover color |
|
|
181
|
+
| `messageInputSendButtonDisabledColor` | Message input send button disabled color |
|
|
182
|
+
|
|
183
|
+
### Prerequisites
|
|
184
|
+
|
|
185
|
+
- **One of `salesforceOrigin` or `frontdoorUrl` is required** (resolved automatically by the component).
|
|
186
|
+
- Use `salesforceOrigin` when your app is hosted inside a Salesforce org and already has an authenticated session.
|
|
187
|
+
- Use `frontdoorUrl` when embedding the chat client outside Salesforce (e.g. localhost or an external app).
|
|
188
|
+
- The org must allow `localhost:<PORT>` in **Trusted Domains for Inline Frames** (session settings) for local development.
|
|
189
|
+
|
|
190
|
+
### Underlying SDK
|
|
191
|
+
|
|
192
|
+
This component wraps `@salesforce/agentforce-conversation-client`. For lower-level usage (vanilla JS, non-React frameworks), see the [Agentforce Conversation Client SDK](https://www.npmjs.com/package/@salesforce/agentforce-conversation-client).
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## Rules and Skills
|
|
197
|
+
|
|
198
|
+
This package includes coding-agent rules and skills for automated workflows:
|
|
199
|
+
|
|
200
|
+
- **Rule** (`rules/embedded-agent-rule.md`): Conventions for which component to use, authentication, rendering modes, and placement. Copy into `.cursor/rules/` (Cursor) or `.clinerules/` (Cline).
|
|
201
|
+
- **Skill** (`skills/embedded-agent/`): Step-by-step workflow for embedding the agent — install, add component, configure mode/theming/agent. Copy into `.cursor/skills/` (Cursor) or `.cline/skills/` (Cline).
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
## Development
|
|
206
|
+
|
|
207
|
+
```bash
|
|
208
|
+
npm run build # apply patches -> dist
|
|
209
|
+
npm run dev # run from dist
|
|
210
|
+
npm run watch # watch and re-apply
|
|
211
|
+
```
|
package/dist/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.33.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.33.0...v1.33.1) (2026-02-17)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [1.33.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.32.0...v1.33.0) (2026-02-17)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
# [1.32.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.31.0...v1.32.0) (2026-02-17)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"name": "base-react-app",
|
|
9
9
|
"version": "1.0.0",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@salesforce/agentforce-conversation-client": "^1.
|
|
11
|
+
"@salesforce/agentforce-conversation-client": "^1.33.0",
|
|
12
12
|
"@salesforce/webapp-experimental": "*",
|
|
13
13
|
"@tailwindcss/vite": "^4.1.17",
|
|
14
14
|
"react": "^19.2.0",
|
|
@@ -1863,9 +1863,9 @@
|
|
|
1863
1863
|
]
|
|
1864
1864
|
},
|
|
1865
1865
|
"node_modules/@salesforce/agentforce-conversation-client": {
|
|
1866
|
-
"version": "1.
|
|
1867
|
-
"resolved": "https://registry.npmjs.org/@salesforce/agentforce-conversation-client/-/agentforce-conversation-client-1.
|
|
1868
|
-
"integrity": "sha512-
|
|
1866
|
+
"version": "1.33.0",
|
|
1867
|
+
"resolved": "https://registry.npmjs.org/@salesforce/agentforce-conversation-client/-/agentforce-conversation-client-1.33.0.tgz",
|
|
1868
|
+
"integrity": "sha512-KYRtnGpUO2LeLqFAXiW0/4aJVDnW0JFkCJwkB7o/QGFlR/9LKGGUDNxGIgypAy6TnTHo6gRCL4EV46O0NF+rhQ==",
|
|
1869
1869
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
1870
1870
|
"dependencies": {
|
|
1871
1871
|
"@lightning-out/application": "2.1.1-rc.2"
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"test": "vitest"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@salesforce/agentforce-conversation-client": "^1.
|
|
15
|
+
"@salesforce/agentforce-conversation-client": "^1.33.0",
|
|
16
16
|
"@salesforce/webapp-experimental": "*",
|
|
17
17
|
"@tailwindcss/vite": "^4.1.17",
|
|
18
18
|
"react": "^19.2.0",
|
package/dist/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.33.1",
|
|
4
4
|
"description": "Embedded Agentforce conversation client feature for web applications",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"react-dom": "^19.2.1",
|
|
36
36
|
"react-router": "^7.10.1"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "42f151f1111c4ad30eb13327e62076a96f2d1110"
|
|
39
39
|
}
|