@salesforce/agentforce-conversation-client 1.119.6 → 1.120.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 +164 -73
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -34,7 +34,7 @@ const { loApp, chatClientComponent } = embedAgentforceClient({
|
|
|
34
34
|
});
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
### With agentId
|
|
37
|
+
### With agentId and agentLabel
|
|
38
38
|
|
|
39
39
|
```typescript
|
|
40
40
|
import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
|
|
@@ -44,6 +44,7 @@ const { loApp, chatClientComponent } = embedAgentforceClient({
|
|
|
44
44
|
salesforceOrigin: "https://myorg.my.salesforce.com",
|
|
45
45
|
agentforceClientConfig: {
|
|
46
46
|
agentId: "AGENT_ID_FROM_ORG",
|
|
47
|
+
agentLabel: "My Agent",
|
|
47
48
|
},
|
|
48
49
|
});
|
|
49
50
|
```
|
|
@@ -63,6 +64,7 @@ embedAgentforceClient({
|
|
|
63
64
|
});
|
|
64
65
|
|
|
65
66
|
// Inline (width/height configurable)
|
|
67
|
+
// The parent container must have an explicit height for inline mode to fill properly.
|
|
66
68
|
embedAgentforceClient({
|
|
67
69
|
container: "#agentforce-container",
|
|
68
70
|
salesforceOrigin: "https://myorg.my.salesforce.com",
|
|
@@ -70,9 +72,38 @@ embedAgentforceClient({
|
|
|
70
72
|
renderingConfig: { mode: "inline", width: 420, height: 600 },
|
|
71
73
|
},
|
|
72
74
|
});
|
|
75
|
+
|
|
76
|
+
// Inline filling the parent container
|
|
77
|
+
embedAgentforceClient({
|
|
78
|
+
container: "#agentforce-container",
|
|
79
|
+
salesforceOrigin: "https://myorg.my.salesforce.com",
|
|
80
|
+
agentforceClientConfig: {
|
|
81
|
+
renderingConfig: { mode: "inline", width: "100%", height: "100%" },
|
|
82
|
+
},
|
|
83
|
+
});
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Header visibility (`headerEnabled`)
|
|
87
|
+
|
|
88
|
+
In inline mode, the header is hidden by default. Set `headerEnabled: true` to show it. In floating mode, the header is always visible regardless of this setting.
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
embedAgentforceClient({
|
|
92
|
+
container: "#agentforce-container",
|
|
93
|
+
salesforceOrigin: "https://myorg.my.salesforce.com",
|
|
94
|
+
agentforceClientConfig: {
|
|
95
|
+
agentLabel: "My Agent",
|
|
96
|
+
renderingConfig: {
|
|
97
|
+
mode: "inline",
|
|
98
|
+
width: "100%",
|
|
99
|
+
height: "100%",
|
|
100
|
+
headerEnabled: true,
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
});
|
|
73
104
|
```
|
|
74
105
|
|
|
75
|
-
### Show Agentforce header icon
|
|
106
|
+
### Show Agentforce header icon (`showHeaderIcon`)
|
|
76
107
|
|
|
77
108
|
By default, the header icon is hidden when `showHeaderIcon` is not set.
|
|
78
109
|
|
|
@@ -112,18 +143,30 @@ const { loApp, chatClientComponent } = embedAgentforceClient({
|
|
|
112
143
|
});
|
|
113
144
|
```
|
|
114
145
|
|
|
146
|
+
### Container
|
|
147
|
+
|
|
148
|
+
| Token name | UI area themed |
|
|
149
|
+
| --------------------- | --------------------------- |
|
|
150
|
+
| `fabBackground` | FAB button background color |
|
|
151
|
+
| `containerBackground` | Chat container background |
|
|
152
|
+
| `headerBackground` | Header background |
|
|
153
|
+
| `containerWidth` | Chat container width |
|
|
154
|
+
| `chatBorderRadius` | Chat border radius |
|
|
155
|
+
| `layoutMaxWidth` | Layout max width |
|
|
156
|
+
|
|
115
157
|
### Agentforce Header
|
|
116
158
|
|
|
117
159
|
| Token name | UI area themed |
|
|
118
160
|
| ------------------------------- | ---------------------------------- |
|
|
119
|
-
| `headerBlockBackground` | Header background
|
|
120
|
-
| `
|
|
161
|
+
| `headerBlockBackground` | Header block background |
|
|
162
|
+
| `headerBlockBorderBottomWidth` | Header border bottom width |
|
|
163
|
+
| `headerBlockBorderBottomStyle` | Header border bottom style |
|
|
164
|
+
| `headerBlockBorderBottomColor` | Header border bottom color |
|
|
121
165
|
| `headerBlockBorderRadius` | Header corner radius |
|
|
122
|
-
| `
|
|
166
|
+
| `headerBlockPaddingBlock` | Header block padding (vertical) |
|
|
167
|
+
| `headerBlockPaddingInline` | Header inline padding (horizontal) |
|
|
123
168
|
| `headerBlockMinHeight` | Header minimum height |
|
|
124
|
-
| `
|
|
125
|
-
| `headerBlockCenterGap` | Header center content gap |
|
|
126
|
-
| `headerBlockCenterMargin` | Header center content margin |
|
|
169
|
+
| `headerBlockBrandingGap` | Header branding area gap |
|
|
127
170
|
| `headerBlockFontFamily` | Header font family |
|
|
128
171
|
| `headerBlockFontWeight` | Header title font weight |
|
|
129
172
|
| `headerBlockFontSize` | Header title font size |
|
|
@@ -145,20 +188,38 @@ const { loApp, chatClientComponent } = embedAgentforceClient({
|
|
|
145
188
|
| `headerBlockActiveBackground` | Header active background |
|
|
146
189
|
| `headerBlockFocusBorder` | Header focus border |
|
|
147
190
|
|
|
191
|
+
### Agentforce Welcome Block
|
|
192
|
+
|
|
193
|
+
| Token name | UI area themed |
|
|
194
|
+
| ----------------------------------- | -------------------------------- |
|
|
195
|
+
| `welcomeBlockTextContainerWidth` | Welcome text container width |
|
|
196
|
+
| `welcomeBlockFontFamily` | Welcome block font family |
|
|
197
|
+
| `welcomeBlockFontSize` | Welcome block font size |
|
|
198
|
+
| `welcomeBlockFontWeight` | Welcome block font weight |
|
|
199
|
+
| `welcomeBlockLineHeight` | Welcome block line height |
|
|
200
|
+
| `welcomeBlockLetterSpacing` | Welcome block letter spacing |
|
|
201
|
+
| `welcomeBlockTextColor` | Welcome block text color |
|
|
202
|
+
| `welcomeBlockPaddingVertical` | Welcome block vertical padding |
|
|
203
|
+
| `welcomeBlockPaddingHorizontal` | Welcome block horizontal padding |
|
|
204
|
+
| `welcomeBlockTextAnimationDuration` | Welcome text animation duration |
|
|
205
|
+
|
|
148
206
|
### Agentforce Messages
|
|
149
207
|
|
|
150
|
-
| Token name | UI area themed
|
|
151
|
-
| -------------------------------- |
|
|
152
|
-
| `
|
|
153
|
-
| `
|
|
154
|
-
| `
|
|
155
|
-
| `
|
|
156
|
-
| `
|
|
157
|
-
| `
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
160
|
-
| `
|
|
161
|
-
| `messageBlockBodyWidth` | Message block body width
|
|
208
|
+
| Token name | UI area themed |
|
|
209
|
+
| -------------------------------- | ------------------------------------------------------- |
|
|
210
|
+
| `messageBlockBorderRadius` | Message block border radius |
|
|
211
|
+
| `avatarDisplay` | Avatar display property (e.g. `block`, `none`) |
|
|
212
|
+
| `hideMessageActions` | Message actions display (e.g. `block`, `none` to hide) |
|
|
213
|
+
| `hideCopyAction` | Copy action button display (e.g. `inline-flex`, `none`) |
|
|
214
|
+
| `messageBlockPaddingContainer` | Message block container padding |
|
|
215
|
+
| `messageBlockFontSize` | Message block font size |
|
|
216
|
+
| `messageBlockBackgroundColor` | Message block background (base) |
|
|
217
|
+
| `messageBlockInboundBorder` | Inbound message border |
|
|
218
|
+
| `messageBlockOutboundBorder` | Outbound message border |
|
|
219
|
+
| `messageBlockBodyWidth` | Message block body width |
|
|
220
|
+
| `messageBlockPadding` | Message block padding |
|
|
221
|
+
| `messageBlockContainerMarginTop` | Message block container top margin |
|
|
222
|
+
| `messageBlockLineHeight` | Message block line height |
|
|
162
223
|
|
|
163
224
|
### Avatar visibility (behavioral config)
|
|
164
225
|
|
|
@@ -169,18 +230,21 @@ Use `renderingConfig.showAvatar` to control whether avatars are rendered in mess
|
|
|
169
230
|
|
|
170
231
|
### Inbound message (customer → agent)
|
|
171
232
|
|
|
172
|
-
| Token name | UI area themed
|
|
173
|
-
| ----------------------------------------- |
|
|
174
|
-
| `
|
|
175
|
-
| `
|
|
176
|
-
| `
|
|
177
|
-
| `
|
|
178
|
-
| `
|
|
233
|
+
| Token name | UI area themed |
|
|
234
|
+
| ----------------------------------------- | --------------------------------- |
|
|
235
|
+
| `inboundMessgeTextColor` | Inbound message text color (base) |
|
|
236
|
+
| `messageBlockInboundBorderRadius` | Inbound message border radius |
|
|
237
|
+
| `messageBlockInboundBackgroundColor` | Inbound message background |
|
|
238
|
+
| `messageBlockInboundTextColor` | Inbound message text color |
|
|
239
|
+
| `messageBlockInboundWidth` | Inbound message width |
|
|
240
|
+
| `messageBlockInboundTextAlign` | Inbound message text alignment |
|
|
241
|
+
| `messageBlockInboundHoverBackgroundColor` | Inbound message hover background |
|
|
179
242
|
|
|
180
243
|
### Outbound message (agent → customer)
|
|
181
244
|
|
|
182
245
|
| Token name | UI area themed |
|
|
183
246
|
| ------------------------------------- | ------------------------------- |
|
|
247
|
+
| `messageBlockOutboundBorderRadius` | Outbound message border radius |
|
|
184
248
|
| `messageBlockOutboundBackgroundColor` | Outbound message background |
|
|
185
249
|
| `messageBlockOutboundTextColor` | Outbound message text color |
|
|
186
250
|
| `messageBlockOutboundWidth` | Outbound message width |
|
|
@@ -189,41 +253,51 @@ Use `renderingConfig.showAvatar` to control whether avatars are rendered in mess
|
|
|
189
253
|
|
|
190
254
|
### Agentforce Input
|
|
191
255
|
|
|
192
|
-
| Token name
|
|
193
|
-
|
|
|
194
|
-
| `messageInputPadding`
|
|
195
|
-
| `
|
|
196
|
-
| `
|
|
197
|
-
| `
|
|
198
|
-
| `
|
|
199
|
-
| `
|
|
200
|
-
| `
|
|
201
|
-
| `
|
|
202
|
-
| `
|
|
203
|
-
| `
|
|
204
|
-
| `
|
|
205
|
-
| `
|
|
206
|
-
| `
|
|
207
|
-
| `
|
|
208
|
-
| `
|
|
209
|
-
| `
|
|
210
|
-
| `
|
|
211
|
-
| `
|
|
212
|
-
| `
|
|
213
|
-
| `
|
|
214
|
-
| `
|
|
215
|
-
| `
|
|
216
|
-
| `
|
|
217
|
-
| `
|
|
218
|
-
| `
|
|
219
|
-
| `
|
|
220
|
-
| `
|
|
221
|
-
| `
|
|
222
|
-
| `messageInputActionButtonFocusBorder`
|
|
223
|
-
| `
|
|
224
|
-
| `
|
|
225
|
-
| `
|
|
226
|
-
| `
|
|
256
|
+
| Token name | UI area themed |
|
|
257
|
+
| ------------------------------------------ | ---------------------------------------------- |
|
|
258
|
+
| `messageInputPadding` | Message input container padding |
|
|
259
|
+
| `messageInputFooterBorderColor` | Message input footer border color |
|
|
260
|
+
| `messageInputBorderRadius` | Message input border radius |
|
|
261
|
+
| `messageInputBorderTransitionDuration` | Message input border transition duration |
|
|
262
|
+
| `messageInputBorderTransitionEasing` | Message input border transition easing |
|
|
263
|
+
| `messageInputTextColor` | Message input text color |
|
|
264
|
+
| `messageInputTextBackgroundColor` | Message input text background color |
|
|
265
|
+
| `messageInputFooterBorderFocusColor` | Message input footer focus border color |
|
|
266
|
+
| `messageInputFocusShadow` | Message input focus shadow |
|
|
267
|
+
| `messageInputMaxHeight` | Message input max height |
|
|
268
|
+
| `messageInputLineHeight` | Message input line height |
|
|
269
|
+
| `messageInputTextPadding` | Message input text padding |
|
|
270
|
+
| `messageInputFontWeight` | Message input font weight |
|
|
271
|
+
| `messageInputFontSize` | Message input font size |
|
|
272
|
+
| `messageInputOverflowY` | Message input overflow Y |
|
|
273
|
+
| `messageInputScrollbarWidth` | Message input scrollbar width |
|
|
274
|
+
| `messageInputScrollbarColor` | Message input scrollbar color |
|
|
275
|
+
| `messageInputActionsWidth` | Message input actions width |
|
|
276
|
+
| `messageInputActionsPaddingRight` | Message input actions right padding |
|
|
277
|
+
| `messageInputFooterPlaceholderText` | Message input placeholder text color |
|
|
278
|
+
| `messageInputPlaceholderFontWeight` | Placeholder font weight |
|
|
279
|
+
| `messageInputErrorTextColor` | Message input error text color |
|
|
280
|
+
| `messageInputActionsGap` | Message input actions gap |
|
|
281
|
+
| `messageInputActionsPadding` | Message input actions padding |
|
|
282
|
+
| `messageInputActionButtonSize` | Message input action button size |
|
|
283
|
+
| `messageInputActionButtonRadius` | Message input action button radius |
|
|
284
|
+
| `messageInputFooterSendButton` | Message input send button color |
|
|
285
|
+
| `messageInputSendButtonDisabledColor` | Message input send button disabled color |
|
|
286
|
+
| `messageInputActionButtonFocusBorder` | Message input action button focus border |
|
|
287
|
+
| `messageInputActionButtonActiveIconColor` | Message input action button active icon color |
|
|
288
|
+
| `messageInputActionButtonActiveBackground` | Message input action button active background |
|
|
289
|
+
| `messageInputSendButtonIconColor` | Message input send button icon color |
|
|
290
|
+
| `messageInputFooterSendButtonHoverColor` | Message input send button hover color |
|
|
291
|
+
| `messageInputActionButtonHoverShadow` | Message input action button hover shadow |
|
|
292
|
+
| `messageInputFilePreviewPadding` | Message input file preview padding |
|
|
293
|
+
| `messageInputTextareaMaxHeight` | Message input textarea max height |
|
|
294
|
+
| `messageInputTextareaWithImageMaxHeight` | Message input textarea max height (with image) |
|
|
295
|
+
|
|
296
|
+
### Agentforce Error Block
|
|
297
|
+
|
|
298
|
+
| Token name | UI area themed |
|
|
299
|
+
| ---------------------- | ---------------------------- |
|
|
300
|
+
| `errorBlockBackground` | Error block background color |
|
|
227
301
|
|
|
228
302
|
### With Configuration
|
|
229
303
|
|
|
@@ -234,14 +308,18 @@ const { loApp, chatClientComponent } = embedAgentforceClient({
|
|
|
234
308
|
container: "#agentforce-container",
|
|
235
309
|
salesforceOrigin: "https://myorg.my.salesforce.com",
|
|
236
310
|
agentforceClientConfig: {
|
|
237
|
-
|
|
311
|
+
agentId: "AGENT_ID_FROM_ORG",
|
|
312
|
+
agentLabel: "My Agent",
|
|
238
313
|
styleTokens: {
|
|
239
|
-
|
|
314
|
+
messageBlockInboundBackgroundColor: "#0176d3",
|
|
240
315
|
},
|
|
241
316
|
renderingConfig: {
|
|
242
317
|
mode: "inline", // or "floating"
|
|
243
|
-
width:
|
|
244
|
-
height:
|
|
318
|
+
width: "100%",
|
|
319
|
+
height: "100%",
|
|
320
|
+
headerEnabled: true,
|
|
321
|
+
showHeaderIcon: false,
|
|
322
|
+
showAvatar: false,
|
|
245
323
|
},
|
|
246
324
|
},
|
|
247
325
|
});
|
|
@@ -288,13 +366,22 @@ Embeds the Agentforce Conversation Client into a specified DOM container. By def
|
|
|
288
366
|
|
|
289
367
|
#### Parameters
|
|
290
368
|
|
|
291
|
-
| Parameter
|
|
292
|
-
|
|
|
293
|
-
| `options.container`
|
|
294
|
-
| `options.salesforceOrigin`
|
|
295
|
-
| `options.appId`
|
|
296
|
-
| `options.frontdoorUrl`
|
|
297
|
-
| `options.agentforceClientConfig`
|
|
369
|
+
| Parameter | Type | Required | Description |
|
|
370
|
+
| ------------------------------------------------------- | ------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
371
|
+
| `options.container` | `string \| HTMLElement` | Yes | CSS selector or HTMLElement to embed into |
|
|
372
|
+
| `options.salesforceOrigin` | `string` | No | Salesforce org origin URL (use when hosted in a Salesforce org) |
|
|
373
|
+
| `options.appId` | `string` | No | 18-digit Lightning Out 2.0 app ID (`app-id`); find it in Lightning Out 2.0 App Manager in Setup; not required for apps created before Spring '26 |
|
|
374
|
+
| `options.frontdoorUrl` | `string` | No | Frontdoor URL for authentication (use when embedding outside Salesforce) |
|
|
375
|
+
| `options.agentforceClientConfig` | `AgentforceClientConfig` | No | Configuration for the Agentforce client (see sub-properties below) |
|
|
376
|
+
| `agentforceClientConfig.agentId` | `string` | Yes\* | The agent to load — required in practice, will not work without it |
|
|
377
|
+
| `agentforceClientConfig.agentLabel` | `string` | No | Display name shown in the chat header. Falls back to the agent's configured name if omitted |
|
|
378
|
+
| `agentforceClientConfig.styleTokens` | `Record<string, string>` | No | Theme colors and style overrides (see Style Tokens section) |
|
|
379
|
+
| `agentforceClientConfig.renderingConfig.mode` | `"inline" \| "floating"` | No | Rendering mode. Defaults to `"floating"` |
|
|
380
|
+
| `agentforceClientConfig.renderingConfig.width` | `string \| number` | No | Width of the inline frame. Number values are treated as `px`, strings as CSS values (e.g. `"100%"`) |
|
|
381
|
+
| `agentforceClientConfig.renderingConfig.height` | `string \| number` | No | Height of the inline frame. Number values are treated as `px`, strings as CSS values (e.g. `"100%"`) |
|
|
382
|
+
| `agentforceClientConfig.renderingConfig.headerEnabled` | `boolean` | No | Show or hide the chat header bar. Defaults to hidden in inline mode. Set `true` to show it |
|
|
383
|
+
| `agentforceClientConfig.renderingConfig.showHeaderIcon` | `boolean` | No | Show or hide the icon in the header. Omit or set `false` to hide |
|
|
384
|
+
| `agentforceClientConfig.renderingConfig.showAvatar` | `boolean` | No | Show or hide avatars in message rows. Defaults to `true` |
|
|
298
385
|
|
|
299
386
|
#### Returns
|
|
300
387
|
|
|
@@ -312,6 +399,10 @@ type StyleTokens = Record<string, string>;
|
|
|
312
399
|
interface AgentforceClientConfig {
|
|
313
400
|
// styleTokens supports theming the Agentforce Conversation Client
|
|
314
401
|
styleTokens?: StyleTokens;
|
|
402
|
+
// The agent to load (required in practice)
|
|
403
|
+
agentId?: string;
|
|
404
|
+
// Display name shown in the chat header
|
|
405
|
+
agentLabel?: string;
|
|
315
406
|
renderingConfig?: {
|
|
316
407
|
mode?: "inline" | "floating";
|
|
317
408
|
width?: string | number;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforce/agentforce-conversation-client",
|
|
3
3
|
"description": "Agentforce Conversation Client SDK for embedding via Lightning Out 2.0",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.120.1",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.js",
|