@salesforce/afv-skills 1.6.5 → 1.6.7

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.
Files changed (21) hide show
  1. package/package.json +3 -3
  2. package/skills/building-ui-bundle-app/SKILL.md +1 -1
  3. package/skills/building-ui-bundle-frontend/SKILL.md +3 -1
  4. package/skills/deploying-ui-bundle/SKILL.md +1 -1
  5. package/skills/generating-experience-lwr-site/SKILL.md +11 -1
  6. package/skills/generating-experience-lwr-site/docs/update-site-urls.md +100 -0
  7. package/skills/generating-ui-bundle-features/SKILL.md +1 -1
  8. package/skills/generating-ui-bundle-metadata/SKILL.md +9 -2
  9. package/skills/generating-ui-bundle-site/SKILL.md +14 -2
  10. package/skills/generating-ui-bundle-site/docs/configure-metadata-digital-experience.md +4 -2
  11. package/skills/generating-ui-bundle-site/docs/update-site-urls.md +100 -0
  12. package/skills/implementing-ui-bundle-agentforce-conversation-client/SKILL.md +216 -37
  13. package/skills/implementing-ui-bundle-agentforce-conversation-client/references/style-tokens.md +168 -21
  14. package/skills/implementing-ui-bundle-file-upload/SKILL.md +1 -1
  15. package/skills/searching-media/SKILL.md +1 -1
  16. package/skills/using-ui-bundle-salesforce-data/SKILL.md +338 -92
  17. package/skills/using-ui-bundle-salesforce-data/references/mutation-query-generation.md +0 -140
  18. package/skills/using-ui-bundle-salesforce-data/references/query-testing.md +0 -78
  19. package/skills/using-ui-bundle-salesforce-data/references/read-query-generation.md +0 -307
  20. package/skills/using-ui-bundle-salesforce-data/references/schema-introspection.md +0 -53
  21. package/skills/using-ui-bundle-salesforce-data/references/ui-bundle-integration.md +0 -221
package/skills/implementing-ui-bundle-agentforce-conversation-client/SKILL.md CHANGED
@@ -1,16 +1,31 @@
1
1
  ---
2
2
  name: implementing-ui-bundle-agentforce-conversation-client
3
- description: "Adds or modifies AgentforceConversationClient in React apps (.tsx or .jsx files). Use when user says \"add chat widget\", \"embed agentforce\", \"add agent\", \"add chatbot\", \"integrate conversational AI\", or asks to change colors, dimensions, styling, or configure agentId, width, height, inline mode, or styleTokens for travel agent, HR agent, employee agent, or any Salesforce agent chat."
3
+ description: "MUST activate when the project contains a uiBundles/*/src/ directory and the task involves adding or modifying a chat widget, chatbot, or conversational AI. Use this skill when the user asks to add, embed, integrate, configure, style, or remove an agent, chatbot, chat widget, conversation client, or AI assistant. Covers styling (colors, fonts, spacing, borders), layout (inline vs floating, width, height, dimensions), and props (agentId, agentLabel, headerEnabled, showHeaderIcon, showAvatar, styleTokens). Activate when files under uiBundles/*/src/ import AgentforceConversationClient or when adding any chat or agent functionality to a page. Never create a custom agent, chatbot, or chat widget component."
4
4
  metadata:
5
5
  author: ACC Components
6
- version: 1.0.0
6
+ version: 1.0.1
7
7
  package: "@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client"
8
8
  sdk-package: "@salesforce/agentforce-conversation-client"
9
- last-updated: 2025-03-18
9
+ last-updated: 2025-04-01
10
10
  ---
11
11
 
12
12
  # Managing Agentforce Conversation Client
13
13
 
14
+ **HARD CONSTRAINT:** NEVER create a custom agent, chatbot, or chat widget component. ALL such requests MUST be fulfilled by importing and rendering the existing `<AgentforceConversationClient />` from `@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client` as documented below. If a requirement is unsupported by this component's props, state the limitation — do not improvise an alternative.
15
+
16
+ ## Prerequisites
17
+
18
+ Before the component will work, the following Salesforce settings must be configured by the user. ALWAYS call out the prequisites after successfully embedding the agent.
19
+
20
+ **Cookie settings:**
21
+
22
+ - Setup → My Domain → Disable "Require first party use of Salesforce cookies"
23
+
24
+ **Trusted domains (required only for local development):**
25
+
26
+ - Setup → Session Settings → Trusted Domains for Inline Frames → Add your domain
27
+ - Local development: `localhost:<PORT>` (e.g., `localhost:3000`)
28
+
14
29
  ## Instructions
15
30
 
16
31
  ### Step 1: Check if component already exists
@@ -73,42 +88,50 @@ Do not infer import path from file discovery alone. Prefer one consistent packag
73
88
 
74
89
  ### Step 4: Add or update component
75
90
 
76
- **For new installations:**
91
+ Determine which sub-step applies:
92
+
93
+ - Component NOT found in Step 1 → go to **4a (New installation)**
94
+ - Component found in Step 1 → go to **4b (Update existing)**
95
+
96
+ #### 4a — New installation
77
97
 
78
- Add to the target React component file using the canonical package import:
98
+ 1. If the user already specified a target file, use that file. Otherwise, ask the user: _"Which file should I add the AgentforceConversationClient to?"_ Do NOT proceed until a target file is confirmed.
99
+ 2. Read the target file to understand its existing imports and TSX structure.
100
+ 3. Add the import at the top of the file, alongside existing imports. Use the canonical package import from Step 3:
79
101
 
80
102
  ```tsx
81
- import { Outlet } from "react-router";
82
103
  import { AgentforceConversationClient } from "@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client";
83
-
84
- export default function AgentChatHost() {
85
- return (
86
- <>
87
- <Outlet />
88
- <AgentforceConversationClient agentId="0Xx..." />
89
- </>
90
- );
91
- }
92
104
  ```
93
105
 
94
- **Fallback note:** Use a local relative import only when the user explicitly requests patched/local component usage in that app.
95
-
96
- **For updates:**
106
+ 4. Insert the `<AgentforceConversationClient />` TSX into the component's return block. Place it as a sibling of existing content — do NOT wrap or restructure existing TSX. Use the real `agentId` obtained in Step 2:
107
+ **Example:**
108
+ ```tsx
109
+ <AgentforceConversationClient agentId="0Xx8X00000001AbCDE" />
110
+ ```
97
111
 
98
- Read the file where component is used and modify only the props that need to change. Preserve all other props. Never delete and recreate.
112
+ 5. Do NOT add any other code (wrappers, layout components, new functions) unless the user explicitly requests it.
99
113
 
100
- **Replacing placeholder values:**
114
+ #### 4b — Update existing
101
115
 
102
- If the component has a placeholder agentId (e.g., `agentId="Placeholder"` or `agentId="0Xx..."`), replace it with the real agent ID:
116
+ 1. Read the file identified in Step 1.
117
+ 2. Locate the existing `<AgentforceConversationClient ... />` TSX element.
118
+ 3. Apply **only** the changes the user requested. Rules:
119
+ - **Add** new props that the user asked for.
120
+ - **Change** prop values the user asked to update.
121
+ - **Preserve** every prop and value the user did NOT mention — do not remove, reorder, or reformat them.
122
+ - **Never** delete the component and recreate it.
123
+ 4. If the current `agentId` is a placeholder (failed validation in Step 1) and a real agent ID was obtained in Step 2, replace the placeholder value:
103
124
 
104
125
  ```tsx
105
- // Before (template with placeholder)
126
+ // Before
106
127
  <AgentforceConversationClient agentId="Placeholder" />
107
128
 
108
- // After (with real agent ID)
129
+ // After
109
130
  <AgentforceConversationClient agentId="0Xx8X00000001AbCDE" />
110
131
  ```
111
132
 
133
+ 5. If the current `agentId` is already valid and the user did not ask to change it, leave it as-is.
134
+
112
135
  ### Step 5: Configure props
113
136
 
114
137
  **Available props (use directly on component):**
@@ -121,6 +144,7 @@ If the component has a placeholder agentId (e.g., `agentId="Placeholder"` or `ag
121
144
  - `styleTokens` (object) - For all styling (colors, fonts, spacing)
122
145
  - `salesforceOrigin` (string) - Auto-resolved
123
146
  - `frontdoorUrl` (string) - Auto-resolved
147
+ - `agentLabel` (string) - header title for agent
124
148
 
125
149
  **Examples:**
126
150
 
@@ -136,6 +160,175 @@ Inline mode with dimensions:
136
160
  <AgentforceConversationClient agentId="0Xx..." inline width="420px" height="600px" />
137
161
  ```
138
162
 
163
+ Adding or updating agent label:
164
+
165
+ ```tsx
166
+ <AgentforceConversationClient agentId="0Xx..." agentLabel="<dummy-agent-label>" />
167
+ ```
168
+
169
+ **Styling rules (mandatory):**
170
+
171
+ - ALL visual customization (colors, fonts, spacing, borders, radii, shadows) MUST go through the `styleTokens` prop. There are no exceptions.
172
+ - ONLY use token names listed in the tables below. Do NOT invent custom token names.
173
+ - NEVER apply styling via CSS files, `style` attributes, `className`, or wrapper elements. These approaches will not work and will be ignored by the component.
174
+ - If the user requests a visual change that does not map to a token below, inform them that the change is not supported by the current token set.
175
+
176
+ ### Container
177
+
178
+ | Token name | UI area themed |
179
+ | --------------------- | --------------------------- |
180
+ | `fabBackground` | FAB button background color |
181
+ | `containerBackground` | Chat container background |
182
+ | `headerBackground` | Header background |
183
+ | `containerWidth` | Chat container width |
184
+ | `chatBorderRadius` | Chat border radius |
185
+ | `layoutMaxWidth` | Layout max width |
186
+
187
+ ### Agentforce Header
188
+
189
+ | Token name | UI area themed |
190
+ | ------------------------------- | ---------------------------------- |
191
+ | `headerBlockBackground` | Header block background |
192
+ | `headerBlockBorderBottomWidth` | Header border bottom width |
193
+ | `headerBlockBorderBottomStyle` | Header border bottom style |
194
+ | `headerBlockBorderBottomColor` | Header border bottom color |
195
+ | `headerBlockBorderRadius` | Header corner radius |
196
+ | `headerBlockPaddingBlock` | Header block padding (vertical) |
197
+ | `headerBlockPaddingInline` | Header inline padding (horizontal) |
198
+ | `headerBlockMinHeight` | Header minimum height |
199
+ | `headerBlockBrandingGap` | Header branding area gap |
200
+ | `headerBlockFontFamily` | Header font family |
201
+ | `headerBlockFontWeight` | Header title font weight |
202
+ | `headerBlockFontSize` | Header title font size |
203
+ | `headerBlockLineHeight` | Header title line height |
204
+ | `headerBlockTextColor` | Header text color |
205
+ | `headerBlockIconDisplay` | Header icon display |
206
+ | `headerBlockIconMargin` | Header icon margin |
207
+ | `headerBlockIconColor` | Header icon color |
208
+ | `headerBlockIconWidth` | Header icon width |
209
+ | `headerBlockIconHeight` | Header icon height |
210
+ | `headerBlockLogoMaxHeight` | Header logo max height |
211
+ | `headerBlockLogoMaxWidth` | Header logo max width |
212
+ | `headerBlockLogoMinWidth` | Header logo min width |
213
+ | `headerBlockButtonHeight` | Header action button height |
214
+ | `headerBlockButtonWidth` | Header action button width |
215
+ | `headerBlockButtonPadding` | Header action button padding |
216
+ | `headerBlockButtonBorderRadius` | Header action button border radius |
217
+ | `headerBlockHoverBackground` | Header hover background |
218
+ | `headerBlockActiveBackground` | Header active background |
219
+ | `headerBlockFocusBorder` | Header focus border |
220
+
221
+ ### Agentforce Welcome Block
222
+
223
+ | Token name | UI area themed |
224
+ | ----------------------------------- | -------------------------------- |
225
+ | `welcomeBlockTextContainerWidth` | Welcome text container width |
226
+ | `welcomeBlockFontFamily` | Welcome block font family |
227
+ | `welcomeBlockFontSize` | Welcome block font size |
228
+ | `welcomeBlockFontWeight` | Welcome block font weight |
229
+ | `welcomeBlockLineHeight` | Welcome block line height |
230
+ | `welcomeBlockLetterSpacing` | Welcome block letter spacing |
231
+ | `welcomeBlockTextColor` | Welcome block text color |
232
+ | `welcomeBlockPaddingVertical` | Welcome block vertical padding |
233
+ | `welcomeBlockPaddingHorizontal` | Welcome block horizontal padding |
234
+ | `welcomeBlockTextAnimationDuration` | Welcome text animation duration |
235
+
236
+ ### Agentforce Messages
237
+
238
+ | Token name | UI area themed |
239
+ | -------------------------------- | ------------------------------------------------------- |
240
+ | `messageBlockBorderRadius` | Message block border radius |
241
+ | `avatarDisplay` | Avatar display property (e.g. `block`, `none`) |
242
+ | `hideMessageActions` | Message actions display (e.g. `block`, `none` to hide) |
243
+ | `hideCopyAction` | Copy action button display (e.g. `inline-flex`, `none`) |
244
+ | `messageBlockPaddingContainer` | Message block container padding |
245
+ | `messageBlockFontSize` | Message block font size |
246
+ | `messageBlockBackgroundColor` | Message block background (base) |
247
+ | `messageBlockInboundBorder` | Inbound message border |
248
+ | `messageBlockOutboundBorder` | Outbound message border |
249
+ | `messageBlockBodyWidth` | Message block body width |
250
+ | `messageBlockPadding` | Message block padding |
251
+ | `messageBlockContainerMarginTop` | Message block container top margin |
252
+ | `messageBlockLineHeight` | Message block line height |
253
+
254
+ ### Avatar visibility (behavioral config)
255
+
256
+ Use `renderingConfig.showAvatar` to control whether avatars are rendered in message rows.
257
+
258
+ - `showAvatar: true` (default) renders avatars.
259
+ - `showAvatar: false` hides avatars by removing them from the DOM.
260
+
261
+ ### Inbound message (agent → customer)
262
+
263
+ | Token name | UI area themed |
264
+ | ----------------------------------------- | --------------------------------- |
265
+ | `inboundMessgeTextColor` | Inbound message text color (base) |
266
+ | `messageBlockInboundBorderRadius` | Inbound message border radius |
267
+ | `messageBlockInboundBackgroundColor` | Inbound message background |
268
+ | `messageBlockInboundTextColor` | Inbound message text color |
269
+ | `messageBlockInboundWidth` | Inbound message width |
270
+ | `messageBlockInboundTextAlign` | Inbound message text alignment |
271
+ | `messageBlockInboundHoverBackgroundColor` | Inbound message hover background |
272
+
273
+ ### Outbound message (customer → agent)
274
+
275
+ | Token name | UI area themed |
276
+ | ------------------------------------- | ------------------------------- |
277
+ | `messageBlockOutboundBorderRadius` | Outbound message border radius |
278
+ | `messageBlockOutboundBackgroundColor` | Outbound message background |
279
+ | `messageBlockOutboundTextColor` | Outbound message text color |
280
+ | `messageBlockOutboundWidth` | Outbound message width |
281
+ | `messageBlockOutboundMarginLeft` | Outbound message left margin |
282
+ | `messageBlockOutboundTextAlign` | Outbound message text alignment |
283
+
284
+ ### Agentforce Input
285
+
286
+ | Token name | UI area themed |
287
+ | ------------------------------------------ | ---------------------------------------------- |
288
+ | `messageInputPadding` | Message input container padding |
289
+ | `messageInputFooterBorderColor` | Message input footer border color |
290
+ | `messageInputBorderRadius` | Message input border radius |
291
+ | `messageInputBorderTransitionDuration` | Message input border transition duration |
292
+ | `messageInputBorderTransitionEasing` | Message input border transition easing |
293
+ | `messageInputTextColor` | Message input text color |
294
+ | `messageInputTextBackgroundColor` | Message input text background color |
295
+ | `messageInputFooterBorderFocusColor` | Message input footer focus border color |
296
+ | `messageInputFocusShadow` | Message input focus shadow |
297
+ | `messageInputMaxHeight` | Message input max height |
298
+ | `messageInputLineHeight` | Message input line height |
299
+ | `messageInputTextPadding` | Message input text padding |
300
+ | `messageInputFontWeight` | Message input font weight |
301
+ | `messageInputFontSize` | Message input font size |
302
+ | `messageInputOverflowY` | Message input overflow Y |
303
+ | `messageInputScrollbarWidth` | Message input scrollbar width |
304
+ | `messageInputScrollbarColor` | Message input scrollbar color |
305
+ | `messageInputActionsWidth` | Message input actions width |
306
+ | `messageInputActionsPaddingRight` | Message input actions right padding |
307
+ | `messageInputFooterPlaceholderText` | Message input placeholder text color |
308
+ | `messageInputPlaceholderFontWeight` | Placeholder font weight |
309
+ | `messageInputErrorTextColor` | Message input error text color |
310
+ | `messageInputActionsGap` | Message input actions gap |
311
+ | `messageInputActionsPadding` | Message input actions padding |
312
+ | `messageInputActionButtonSize` | Message input action button size |
313
+ | `messageInputActionButtonRadius` | Message input action button radius |
314
+ | `messageInputFooterSendButton` | Message input send button color |
315
+ | `messageInputSendButtonDisabledColor` | Message input send button disabled color |
316
+ | `messageInputActionButtonFocusBorder` | Message input action button focus border |
317
+ | `messageInputActionButtonActiveIconColor` | Message input action button active icon color |
318
+ | `messageInputActionButtonActiveBackground` | Message input action button active background |
319
+ | `messageInputSendButtonIconColor` | Message input send button icon color |
320
+ | `messageInputFooterSendButtonHoverColor` | Message input send button hover color |
321
+ | `messageInputActionButtonHoverShadow` | Message input action button hover shadow |
322
+ | `messageInputFilePreviewPadding` | Message input file preview padding |
323
+ | `messageInputTextareaMaxHeight` | Message input textarea max height |
324
+ | `messageInputTextareaWithImageMaxHeight` | Message input textarea max height (with image) |
325
+
326
+ ### Agentforce Error Block
327
+
328
+ | Token name | UI area themed |
329
+ | ---------------------- | ---------------------------- |
330
+ | `errorBlockBackground` | Error block background color |
331
+
139
332
  Styling with styleTokens:
140
333
 
141
334
  ```tsx
@@ -156,7 +349,6 @@ Styling with styleTokens:
156
349
  - Inline without header, calculated dimensions
157
350
  - Complete host component examples
158
351
 
159
- **For styling:** For ANY color, font, or spacing changes, use `styleTokens` prop only. See `references/style-tokens.md` for complete token list and examples.
160
352
 
161
353
  **Common mistakes to avoid:** Consult `references/constraints.md` for:
162
354
 
@@ -171,16 +363,3 @@ If component doesn't appear or authentication fails, see `references/troubleshoo
171
363
  - Agent activation and deployment
172
364
  - Localhost trusted domains
173
365
  - Cookie restriction settings
174
-
175
- ## Prerequisites
176
-
177
- Before the component will work, the following Salesforce settings must be configured by the user:
178
-
179
- **Cookie settings:**
180
-
181
- - Setup → My Domain → Disable "Require first party use of Salesforce cookies"
182
-
183
- **Trusted domains (required only for local development):**
184
-
185
- - Setup → Session Settings → Trusted Domains for Inline Frames → Add your domain
186
- - Local development: `localhost:<PORT>` (e.g., `localhost:3000`)
package/skills/implementing-ui-bundle-agentforce-conversation-client/references/style-tokens.md CHANGED
@@ -8,21 +8,179 @@ The `styleTokens` prop is the **ONLY** way to customize the appearance of the Ag
8
8
 
9
9
  ## Source of Truth
10
10
 
11
- For the complete and always up-to-date list of all 60+ style tokens, see:
12
-
13
- **[@salesforce/agentforce-conversation-client on npm](https://www.npmjs.com/package/@salesforce/agentforce-conversation-client)**
14
-
15
- The npm package README contains the definitive documentation with all available style tokens.
11
+ For the complete and always up-to-date list of all style tokens, see the tables below:
12
+
13
+ - ALL visual customization (colors, fonts, spacing, borders, radii, shadows) MUST go through the `styleTokens` prop. There are no exceptions.
14
+ - ONLY use token names listed in the tables below. Do NOT invent custom token names.
15
+ - NEVER apply styling via CSS files, `style` attributes, `className`, or wrapper elements. These approaches will not work and will be ignored by the component.
16
+ - If the user requests a visual change that does not map to a token below, inform them that the change is not supported by the current token set.
17
+
18
+ ### Container
19
+
20
+ | Token name | UI area themed |
21
+ | --------------------- | --------------------------- |
22
+ | `fabBackground` | FAB button background color |
23
+ | `containerBackground` | Chat container background |
24
+ | `headerBackground` | Header background |
25
+ | `containerWidth` | Chat container width |
26
+ | `chatBorderRadius` | Chat border radius |
27
+ | `layoutMaxWidth` | Layout max width |
28
+
29
+ ### Agentforce Header
30
+
31
+ | Token name | UI area themed |
32
+ | ------------------------------- | ---------------------------------- |
33
+ | `headerBlockBackground` | Header block background |
34
+ | `headerBlockBorderBottomWidth` | Header border bottom width |
35
+ | `headerBlockBorderBottomStyle` | Header border bottom style |
36
+ | `headerBlockBorderBottomColor` | Header border bottom color |
37
+ | `headerBlockBorderRadius` | Header corner radius |
38
+ | `headerBlockPaddingBlock` | Header block padding (vertical) |
39
+ | `headerBlockPaddingInline` | Header inline padding (horizontal) |
40
+ | `headerBlockMinHeight` | Header minimum height |
41
+ | `headerBlockBrandingGap` | Header branding area gap |
42
+ | `headerBlockFontFamily` | Header font family |
43
+ | `headerBlockFontWeight` | Header title font weight |
44
+ | `headerBlockFontSize` | Header title font size |
45
+ | `headerBlockLineHeight` | Header title line height |
46
+ | `headerBlockTextColor` | Header text color |
47
+ | `headerBlockIconDisplay` | Header icon display |
48
+ | `headerBlockIconMargin` | Header icon margin |
49
+ | `headerBlockIconColor` | Header icon color |
50
+ | `headerBlockIconWidth` | Header icon width |
51
+ | `headerBlockIconHeight` | Header icon height |
52
+ | `headerBlockLogoMaxHeight` | Header logo max height |
53
+ | `headerBlockLogoMaxWidth` | Header logo max width |
54
+ | `headerBlockLogoMinWidth` | Header logo min width |
55
+ | `headerBlockButtonHeight` | Header action button height |
56
+ | `headerBlockButtonWidth` | Header action button width |
57
+ | `headerBlockButtonPadding` | Header action button padding |
58
+ | `headerBlockButtonBorderRadius` | Header action button border radius |
59
+ | `headerBlockHoverBackground` | Header hover background |
60
+ | `headerBlockActiveBackground` | Header active background |
61
+ | `headerBlockFocusBorder` | Header focus border |
62
+
63
+ ### Agentforce Welcome Block
64
+
65
+ | Token name | UI area themed |
66
+ | ----------------------------------- | -------------------------------- |
67
+ | `welcomeBlockTextContainerWidth` | Welcome text container width |
68
+ | `welcomeBlockFontFamily` | Welcome block font family |
69
+ | `welcomeBlockFontSize` | Welcome block font size |
70
+ | `welcomeBlockFontWeight` | Welcome block font weight |
71
+ | `welcomeBlockLineHeight` | Welcome block line height |
72
+ | `welcomeBlockLetterSpacing` | Welcome block letter spacing |
73
+ | `welcomeBlockTextColor` | Welcome block text color |
74
+ | `welcomeBlockPaddingVertical` | Welcome block vertical padding |
75
+ | `welcomeBlockPaddingHorizontal` | Welcome block horizontal padding |
76
+ | `welcomeBlockTextAnimationDuration` | Welcome text animation duration |
77
+
78
+ ### Agentforce Messages
79
+
80
+ | Token name | UI area themed |
81
+ | -------------------------------- | ------------------------------------------------------- |
82
+ | `messageBlockBorderRadius` | Message block border radius |
83
+ | `avatarDisplay` | Avatar display property (e.g. `block`, `none`) |
84
+ | `hideMessageActions` | Message actions display (e.g. `block`, `none` to hide) |
85
+ | `hideCopyAction` | Copy action button display (e.g. `inline-flex`, `none`) |
86
+ | `messageBlockPaddingContainer` | Message block container padding |
87
+ | `messageBlockFontSize` | Message block font size |
88
+ | `messageBlockBackgroundColor` | Message block background (base) |
89
+ | `messageBlockInboundBorder` | Inbound message border |
90
+ | `messageBlockOutboundBorder` | Outbound message border |
91
+ | `messageBlockBodyWidth` | Message block body width |
92
+ | `messageBlockPadding` | Message block padding |
93
+ | `messageBlockContainerMarginTop` | Message block container top margin |
94
+ | `messageBlockLineHeight` | Message block line height |
95
+
96
+ ### Avatar visibility (behavioral config)
97
+
98
+ Use `renderingConfig.showAvatar` to control whether avatars are rendered in message rows.
99
+
100
+ - `showAvatar: true` (default) renders avatars.
101
+ - `showAvatar: false` hides avatars by removing them from the DOM.
102
+
103
+ ### Inbound message (agent → customer)
104
+
105
+ | Token name | UI area themed |
106
+ | ----------------------------------------- | --------------------------------- |
107
+ | `inboundMessgeTextColor` | Inbound message text color (base) |
108
+ | `messageBlockInboundBorderRadius` | Inbound message border radius |
109
+ | `messageBlockInboundBackgroundColor` | Inbound message background |
110
+ | `messageBlockInboundTextColor` | Inbound message text color |
111
+ | `messageBlockInboundWidth` | Inbound message width |
112
+ | `messageBlockInboundTextAlign` | Inbound message text alignment |
113
+ | `messageBlockInboundHoverBackgroundColor` | Inbound message hover background |
114
+
115
+ ### Outbound message (customer → agent)
116
+
117
+ | Token name | UI area themed |
118
+ | ------------------------------------- | ------------------------------- |
119
+ | `messageBlockOutboundBorderRadius` | Outbound message border radius |
120
+ | `messageBlockOutboundBackgroundColor` | Outbound message background |
121
+ | `messageBlockOutboundTextColor` | Outbound message text color |
122
+ | `messageBlockOutboundWidth` | Outbound message width |
123
+ | `messageBlockOutboundMarginLeft` | Outbound message left margin |
124
+ | `messageBlockOutboundTextAlign` | Outbound message text alignment |
125
+
126
+ ### Agentforce Input
127
+
128
+ | Token name | UI area themed |
129
+ | ------------------------------------------ | ---------------------------------------------- |
130
+ | `messageInputPadding` | Message input container padding |
131
+ | `messageInputFooterBorderColor` | Message input footer border color |
132
+ | `messageInputBorderRadius` | Message input border radius |
133
+ | `messageInputBorderTransitionDuration` | Message input border transition duration |
134
+ | `messageInputBorderTransitionEasing` | Message input border transition easing |
135
+ | `messageInputTextColor` | Message input text color |
136
+ | `messageInputTextBackgroundColor` | Message input text background color |
137
+ | `messageInputFooterBorderFocusColor` | Message input footer focus border color |
138
+ | `messageInputFocusShadow` | Message input focus shadow |
139
+ | `messageInputMaxHeight` | Message input max height |
140
+ | `messageInputLineHeight` | Message input line height |
141
+ | `messageInputTextPadding` | Message input text padding |
142
+ | `messageInputFontWeight` | Message input font weight |
143
+ | `messageInputFontSize` | Message input font size |
144
+ | `messageInputOverflowY` | Message input overflow Y |
145
+ | `messageInputScrollbarWidth` | Message input scrollbar width |
146
+ | `messageInputScrollbarColor` | Message input scrollbar color |
147
+ | `messageInputActionsWidth` | Message input actions width |
148
+ | `messageInputActionsPaddingRight` | Message input actions right padding |
149
+ | `messageInputFooterPlaceholderText` | Message input placeholder text color |
150
+ | `messageInputPlaceholderFontWeight` | Placeholder font weight |
151
+ | `messageInputErrorTextColor` | Message input error text color |
152
+ | `messageInputActionsGap` | Message input actions gap |
153
+ | `messageInputActionsPadding` | Message input actions padding |
154
+ | `messageInputActionButtonSize` | Message input action button size |
155
+ | `messageInputActionButtonRadius` | Message input action button radius |
156
+ | `messageInputFooterSendButton` | Message input send button color |
157
+ | `messageInputSendButtonDisabledColor` | Message input send button disabled color |
158
+ | `messageInputActionButtonFocusBorder` | Message input action button focus border |
159
+ | `messageInputActionButtonActiveIconColor` | Message input action button active icon color |
160
+ | `messageInputActionButtonActiveBackground` | Message input action button active background |
161
+ | `messageInputSendButtonIconColor` | Message input send button icon color |
162
+ | `messageInputFooterSendButtonHoverColor` | Message input send button hover color |
163
+ | `messageInputActionButtonHoverShadow` | Message input action button hover shadow |
164
+ | `messageInputFilePreviewPadding` | Message input file preview padding |
165
+ | `messageInputTextareaMaxHeight` | Message input textarea max height |
166
+ | `messageInputTextareaWithImageMaxHeight` | Message input textarea max height (with image) |
167
+
168
+ ### Agentforce Error Block
169
+
170
+ | Token name | UI area themed |
171
+ | ---------------------- | ---------------------------- |
172
+ | `errorBlockBackground` | Error block background color |
16
173
 
17
174
  ## Token Categories
18
175
 
19
176
  Style tokens are organized by UI area:
20
177
 
21
- - **Header** (7 tokens): background, text color, hover, active, focus, border, font family
22
- - **Messages** (10 tokens): colors, padding, margins, border radius, fonts, body width
23
- - **Inbound messages** (5 tokens): background, text color, width, alignment, hover
24
- - **Outbound messages** (5 tokens): background, text color, width, alignment, margin
25
- - **Input** (33 tokens): colors, borders, fonts, padding, buttons, scrollbar, textarea, actions
178
+ - **Header** : background, text color, hover, active, focus, border, font family
179
+ - **Messages** : colors, padding, margins, border radius, fonts, body width
180
+ - **Inbound messages** : background, text color, width, alignment, hover
181
+ - **Outbound messages** : background, text color, width, alignment, margin
182
+ - **Input** : colors, borders, fonts, padding, buttons, scrollbar, textarea, actions
183
+ - **Error Component** : background
26
184
 
27
185
  ## Common Use Cases
28
186
 
@@ -82,17 +240,6 @@ Style tokens are organized by UI area:
82
240
  />
83
241
  ```
84
242
 
85
- ## How to Find Token Names
86
-
87
- 1. Check the [@salesforce/agentforce-conversation-client npm package](https://www.npmjs.com/package/@salesforce/agentforce-conversation-client) for the complete list of all tokens
88
-
89
- 2. Token names follow a pattern:
90
- - `headerBlock*` - Header area
91
- - `messageBlock*` - Message bubbles
92
- - `messageBlockInbound*` - Messages from customer to agent
93
- - `messageBlockOutbound*` - Messages from agent to customer
94
- - `messageInput*` - Input field and send button
95
-
96
243
  ## Important Notes
97
244
 
98
245
  - You do NOT need to provide all tokens - only override the ones you want to change
package/skills/implementing-ui-bundle-file-upload/SKILL.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: implementing-ui-bundle-file-upload
3
- description: "Add file upload functionality to React UI bundles with progress tracking and Salesforce ContentVersion integration. Use when the user wants to upload files, attach documents, handle file input, create file dropzones, track upload progress, or link files to Salesforce records. This feature provides programmatic APIs ONLY — no components or hooks are exported. Build your own custom UI using the upload() API. ALWAYS use this feature instead of building file upload from scratch with FormData or XHR."
3
+ description: "MUST activate when the project contains a uiBundles/*/src/ directory and the task involves uploading, attaching, or dropping files. Use this skill when adding file upload functionality to a UI bundle app. Provides progress tracking and Salesforce ContentVersion integration. This feature provides programmatic APIs ONLY — build custom UI using the upload() API. ALWAYS use this instead of building file upload from scratch with FormData or XHR."
4
4
  ---
5
5
 
6
6
  # File Upload API (workflow)
package/skills/searching-media/SKILL.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: searching-media
3
- description: "Searches for and retrieves existing visual media (images, logos, icons, photos, graphics, banners, thumbnails, hero images, backgrounds) from sources such as Salesforce CMS, Data 360 or any other source. Use this skill ANY TIME a user request involves finding, searching, getting, fetching, retrieving, grabbing, looking up, or locating media. Takes PRIORITY and activates FIRST when ANY media search/retrieval is mentioned, regardless of what else happens with the media afterward. Triggers for requests like \"search for logo\", \"find hero image\", \"get company logo\", \"locate icons\", \"fetch background image\", \"retrieve product photos\". Handles the search and source selection workflow. Does not apply when the request is about brand search, to generate NEW images with AI, design custom graphics from scratch, or edit existing images."
3
+ description: "Searches for and retrieves existing visual media (images, logos, icons, photos, graphics, banners, thumbnails, hero images, backgrounds) from sources such as Salesforce CMS, Data 360 or any other source. Use this skill ANY TIME a user request involves finding, searching, getting, fetching, retrieving, grab, looking up, locating media. NEVER call search_media_cms_channels, search_electronic_media tools directly — always go through this skill first. This skill must be activated before any tool is used for media search or retrieval, without exception. Takes PRIORITY and activates FIRST when ANY media search/retrieval is mentioned, regardless of what else happens with the media afterward. Triggers for requests like \"search for logo\", \"find hero image\", \"get company logo\", \"locate icons\", \"fetch background image\", \"retrieve product photos\". Handles the search and source selection workflow. Does not apply when the request is about brand search, to generate NEW images with AI, or edit existing images."
4
4
  compatibility: "Requires search_media_cms_channels and/or search_electronic_media MCP tools"
5
5
  metadata:
6
6
  version: "1.0"