@salesforce/afv-skills 1.6.4 → 1.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/afv-skills",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "Salesforce skills for Agentforce Vibes",
   "license": "CC-BY-NC-4.0",
   "files": [
@@ -11,8 +11,8 @@
     "registry": "https://registry.npmjs.org"
   },
   "devDependencies": {
-    "@salesforce/ui-bundle-template-app-react-sample-b2e": "^1.118.1",
-    "@salesforce/ui-bundle-template-app-react-sample-b2x": "^1.118.1",
+    "@salesforce/ui-bundle-template-app-react-sample-b2e": "^1.120.2",
+    "@salesforce/ui-bundle-template-app-react-sample-b2x": "^1.120.2",
     "@salesforce/webapp-template-app-react-sample-b2e-experimental": "^1.117.1",
     "@salesforce/webapp-template-app-react-sample-b2x-experimental": "^1.117.1",
     "@types/js-yaml": "^4.0.9",

package/skills/generating-experience-lwr-site/SKILL.md

@@ -102,6 +102,7 @@ Before doing anything, you **MUST ALWAYS** load them first if they match user in
 - [handle-component-and-region-ids.md](docs/handle-component-and-region-ids.md) - **UUID generation (CRITICAL)** for component and region ids used in views and themeLayout.
 - [handle-ui-components.md](docs/handle-ui-components.md) - Component discovery, schemas, insertion, configuration
 - [configure-guest-sharing-rules.md](docs/configure-guest-sharing-rules.md) - **Guest sharing rules** (`sharingGuestRules`) for public sites — use for any request involving "guest sharing rule", "Site Guest User", or sharing object records with unauthenticated visitors
+- [update-site-urls.md](docs/update-site-urls.md) - **Updating site URLs** - URL architecture, workflow for updating `urlPathPrefix` in DigitalExperienceConfig, Network, and CustomSite
 
 ## Common Workflows
 
@@ -211,6 +212,15 @@ The site developer name can be found in the CustomSite filename (e.g., `sites/My
 
 If the site is not found, an error message will be returned indicating that the site may not be deployed. Ensure the site has been successfully deployed before calling this action.
 
+### Updating Experience Site URLs
+
+**Use when** user wants to update or change site URLs (urlPathPrefix).
+
+**Steps** (Follow the steps sequentially. Do not skip any step before proceeding):
+
+- [ ] MUST read [update-site-urls.md](docs/update-site-urls.md) to understand the three-component architecture and URL update workflow
+- [ ] Follow the step-by-step workflow in the doc to update URLs consistently across all three components (DigitalExperienceConfig, Network, CustomSite)
+
 ### Validation & Deployment
 
 Use `sf` CLI to validate and deploy. Access help docs by attaching `--help`, e.g.:
@@ -230,4 +240,4 @@ sf project deploy validate --metadata DigitalExperienceBundle DigitalExperience
 
 ```bash
 sf project deploy start --metadata DigitalExperienceBundle DigitalExperience DigitalExperienceConfig Network CustomSite --target-org ${usernameOrAlias}
-```
+```

package/skills/generating-experience-lwr-site/docs/update-site-urls.md

@@ -0,0 +1,100 @@
+# Updating Experience Site URLs
+
+Experience sites have a three-component architecture with two distinct URL patterns. Understanding this structure is critical when updating site URLs.
+
+## Architecture Overview
+
+Every Salesforce Experience Site consists of three components:
+
+1. **Network** (metadata: `Network`) - Network configuration
+2. **ChatterNetwork Site** (metadata: `CustomSite`) - Authentication endpoints and core site services  
+3. **ChatterNetworkPicasso Site** (metadata: `DigitalExperienceConfig` + `DigitalExperienceBundle`) - Customer-facing pages and content
+
+## URL Pattern
+
+These three components use **two different URLs**:
+
+- **Primary URL** (ChatterNetworkPicasso): Used for customer-facing pages
+  - Defined in: `DigitalExperienceConfig` → `<urlPathPrefix>`
+  - Example: `mysite`
+
+- **Secondary URL** (Network + CustomSite): Used for authentication endpoints and other services
+  - Defined in: `Network` → `<urlPathPrefix>` AND `CustomSite` → `<urlPathPrefix>`
+  - Example: `mysitevforcesite`
+  - **Must be synchronized** - both files must have identical values
+
+By default, Salesforce differentiates these URLs by appending `vforcesite` suffix to the Network/CustomSite URL.
+
+## URL Update Workflow
+
+When updating site URLs, follow this workflow:
+
+### Step 1: Discover All URL References
+
+Search for all occurrences of `urlPathPrefix` across the project metadata files.
+
+**For agents**: Use the `search_files` tool with these parameters:
+- path: `force-app/main/default`
+- regex: `urlPathPrefix`
+- file_pattern: `*.xml`
+
+**For humans**: Use your IDE's search functionality or command line tools:
+```bash
+# Using grep
+grep -r "urlPathPrefix" force-app/main/default --include="*.xml"
+
+# Using VS Code: Ctrl+Shift+F (Windows/Linux) or Cmd+Shift+F (Mac)
+# Search for: urlPathPrefix
+# Files to include: *.xml
+```
+
+### Step 2: Identify URL Groups
+
+Determine which files belong to which URL group:
+
+- **Primary URL Group**: `DigitalExperienceConfig`
+- **Secondary URL Group**: `Network` AND `CustomSite`
+
+### Step 3: Update URLs Consistently
+
+Update the `<urlPathPrefix>` value in each file:
+
+- **DigitalExperienceConfig**: Update to new primary URL
+- **Network**: Update to new secondary URL (typically primary URL + `vforcesite`)
+- **CustomSite**: Update to **same value as Network** (must be synchronized)
+
+### Step 4: Validate Naming Convention
+
+Ensure URL values follow best practices:
+- Use lowercase letters only
+- Avoid special characters except hyphens where appropriate
+- Keep URLs concise and meaningful
+
+### Step 5: Verify Consistency
+
+Before deploying, confirm:
+- [ ] Primary URL in `DigitalExperienceConfig` is set correctly
+- [ ] Secondary URL in `Network` matches `CustomSite` exactly
+- [ ] URLs are properly differentiated (typically via suffix)
+- [ ] All URL values follow naming conventions
+
+## Example URL Configuration
+
+```
+ChatterNetworkPicasso Site (Primary):
+  DigitalExperienceConfig: <urlPathPrefix>bestsupport</urlPathPrefix>
+
+Network + ChatterNetwork Site (Secondary):
+  Network:    <urlPathPrefix>bestsupportvforcesite</urlPathPrefix>
+  CustomSite: <urlPathPrefix>bestsupportvforcesite</urlPathPrefix>
+```
+
+## Common Pitfalls to Avoid
+
+❌ **Don't** update only one or two files - all three must be updated  
+❌ **Don't** use different values in Network and CustomSite  
+❌ **Don't** use the same URL for both Primary and Secondary groups  
+❌ **Don't** skip the discovery step with `search_files`  
+✅ **Do** use `search_files` to find all occurrences first  
+✅ **Do** maintain URL differentiation between the two groups  
+✅ **Do** follow lowercase naming conventions

package/skills/{generating-experience-react-site → generating-ui-bundle-site}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: generating-experience-react-site
+name: generating-ui-bundle-site
 description: "Use this skill when users need to create or configure a Salesforce Digital Experience Site specifically for hosting a React UI bundle. Trigger when users mention creating an Experience site for a React app, setting up a React site on Salesforce, configuring Network/CustomSite/DigitalExperience metadata for a UI bundle, or deploying site infrastructure for a React application. Also trigger when users mention site URL path prefixes, app namespaces, appDevName, guest access configuration, DigitalExperienceConfig, DigitalExperienceBundle, or sfdc_cms__site content types in the context of React apps. Always use this skill for any React UI bundle site creation or site infrastructure configuration work, even if the user just says \"create a site for my React app\" or \"set up the site for my UI bundle.\""
 ---
 
@@ -51,6 +51,8 @@ Use the default templates in the docs below. Values in `{braces}` are resolved p
 | DigitalExperienceBundle | [configure-metadata-digital-experience-bundle.md](docs/configure-metadata-digital-experience-bundle.md) |
 | DigitalExperience (sfdc_cms__site) | [configure-metadata-digital-experience.md](docs/configure-metadata-digital-experience.md) |
 
+For URL updates, see [update-site-urls.md](docs/update-site-urls.md).
+
 ### Execution Note for Step 3: Load and use the docs
 - Agents MUST read the full contents of each docs/*.md file referenced in Step 3 before attempting to populate metadata fields.
 - Use your platform's file-read tool (for example, `read_file`) to load these files in full, then perform placeholder substitution for values in `{braces}` using the resolved properties from Step 1.
@@ -63,7 +65,7 @@ Use the default templates in the docs below. Values in `{braces}` are resolved p
 - Read entire file contents, replace placeholders (e.g. `{siteName}`) with the resolved values, then use the expanded templates to populate the metadata XML/JSON content.
   
 ### Step 4: Resolve Additional Configurations
-Address any extra configurations the user requests. Use the metadata sections and field context identified in Step 2 to understand each field’s purpose and constraints, then update only the minimum necessary fields.
+Address any extra configurations the user requests. Use the metadata sections and field context identified in Step 2 to understand each field's purpose and constraints, then update only the minimum necessary fields.
 
 ## Verification Checklist
 Before deploying, confirm:
@@ -76,3 +78,13 @@ Before deploying, confirm:
 ```bash
 sf project deploy validate --metadata Network CustomSite DigitalExperienceConfig DigitalExperienceBundle DigitalExperience --target-org ${usernameOrAlias}
 ```
+
+## Common Workflows
+
+### Updating Experience Site URLs
+
+**Use when** user wants to update or change site URLs (urlPathPrefix).
+
+**Steps**:
+- [ ] Read [update-site-urls.md](docs/update-site-urls.md) to understand the three-component architecture and URL update workflow
+- [ ] Follow the step-by-step workflow in the doc to update URLs consistently across all three components (DigitalExperienceConfig, Network, CustomSite)

package/skills/{generating-experience-react-site → generating-ui-bundle-site}/docs/configure-metadata-digital-experience.md

@@ -3,7 +3,7 @@
 ## Purpose
 These configuration files create **net-new, default** DigitalExperience content records (`sfdc_cms__site` type) for a Digital Experience React Site. They are not intended to edit or modify existing DigitalExperience content. Use these templates only when provisioning a brand-new React site.
 
-The `appContainer: true` and `appSpace` fields in `content.json` are what make this a React site rather than a standard LWR site. The `appSpace` value follows the format `{namespace}__{developerName}` and must match a deployed `UIBundle` metadata record.
+The `appContainer: true` field in `content.json` is what makes this a React site rather than a standard LWR site. The `appSpace` field should **be left empty if the UIBundle metadata record does not already exist**. When the UIBundle exists, populate the `appSpace` value following the format `{namespace}__{developerName}` to match the deployed `UIBundle` metadata record.
 
 ## File Location
 The DigitalExperience directory contains only `_meta.json` and `content.json`. Do not create any directories other than `sfdc_cms__site` inside the bundle.
@@ -32,7 +32,9 @@ digitalExperiences/site/{siteName}1/sfdc_cms__site/{siteName}1/content.json
   "contentBody": {
     "authenticationType": "AUTHENTICATED_WITH_PUBLIC_ACCESS_ENABLED",
     "appContainer": true,
-    "appSpace": "{appNamespace}__{appDevName}"
+    "appSpace": ""
   }
 }
 ```
+
+**Note:** Leave `appSpace` empty (`""`) if the UIBundle does not exist. If the UIBundle metadata record is already deployed, populate it with `"{appNamespace}__{appDevName}"`.

package/skills/generating-ui-bundle-site/docs/update-site-urls.md

@@ -0,0 +1,100 @@
+# Updating Experience Site URLs
+
+Experience sites have a three-component architecture with two distinct URL patterns. Understanding this structure is critical when updating site URLs.
+
+## Architecture Overview
+
+Every Salesforce Experience Site consists of three components:
+
+1. **Network** (metadata: `Network`) - Network configuration
+2. **ChatterNetwork Site** (metadata: `CustomSite`) - Legacy site and proxy core site services
+3. **ChatterNetworkPicasso Site** (metadata: `DigitalExperienceConfig` + `DigitalExperienceBundle`) - Customer-facing pages and content
+
+## URL Pattern
+
+These three components use **two different URLs**:
+
+- **Primary URL** (ChatterNetworkPicasso): Used for customer-facing pages
+  - Defined in: `DigitalExperienceConfig` → `<urlPathPrefix>`
+  - Example: `mysite`
+
+- **Secondary URL** (Network + CustomSite): Used for legacy authentication endpoints and other services
+  - Defined in: `Network` → `<urlPathPrefix>` AND `CustomSite` → `<urlPathPrefix>`
+  - Example: `mysitevforcesite`
+  - **Must be synchronized** - both files must have identical values
+
+By default, Salesforce differentiates these URLs by appending `vforcesite` suffix to the Network/CustomSite URL.
+
+## URL Update Workflow
+
+When updating site URLs, follow this workflow:
+
+### Step 1: Discover All URL References
+
+Search for all occurrences of `urlPathPrefix` across the project metadata files.
+
+**For agents**: Use the `search_files` tool with these parameters:
+- path: `force-app/main/default`
+- regex: `urlPathPrefix`
+- file_pattern: `*.xml`
+
+**For humans**: Use your IDE's search functionality or command line tools:
+```bash
+# Using grep
+grep -r "urlPathPrefix" force-app/main/default --include="*.xml"
+
+# Using VS Code: Ctrl+Shift+F (Windows/Linux) or Cmd+Shift+F (Mac)
+# Search for: urlPathPrefix
+# Files to include: *.xml
+```
+
+### Step 2: Identify URL Groups
+
+Determine which files belong to which URL group:
+
+- **Primary URL Group**: `DigitalExperienceConfig`
+- **Secondary URL Group**: `Network` AND `CustomSite`
+
+### Step 3: Update URLs Consistently
+
+Update the `<urlPathPrefix>` value in each file:
+
+- **DigitalExperienceConfig**: Update to new primary URL
+- **Network**: Update to new secondary URL (typically primary URL + `vforcesite`)
+- **CustomSite**: Update to **same value as Network** (must be synchronized)
+
+### Step 4: Validate Naming Convention
+
+Ensure URL values follow best practices:
+- Use lowercase letters only
+- Avoid special characters except hyphens where appropriate
+- Keep URLs concise and meaningful
+
+### Step 5: Verify Consistency
+
+Before deploying, confirm:
+- [ ] Primary URL in `DigitalExperienceConfig` is set correctly
+- [ ] Secondary URL in `Network` matches `CustomSite` exactly
+- [ ] URLs are properly differentiated (typically via suffix)
+- [ ] All URL values follow naming conventions
+
+## Example URL Configuration
+
+```
+ChatterNetworkPicasso Site (Primary):
+  DigitalExperienceConfig: <urlPathPrefix>bestsupport</urlPathPrefix>
+
+Network + ChatterNetwork Site (Secondary):
+  Network:    <urlPathPrefix>bestsupportvforcesite</urlPathPrefix>
+  CustomSite: <urlPathPrefix>bestsupportvforcesite</urlPathPrefix>
+```
+
+## Common Pitfalls to Avoid
+
+❌ **Don't** update only one or two files - all three must be updated  
+❌ **Don't** use different values in Network and CustomSite  
+❌ **Don't** use the same URL for both Primary and Secondary groups  
+❌ **Don't** skip the discovery step with `search_files`  
+✅ **Do** use `search_files` to find all occurrences first  
+✅ **Do** maintain URL differentiation between the two groups  
+✅ **Do** follow lowercase naming conventions

package/skills/implementing-ui-bundle-agentforce-conversation-client/SKILL.md

@@ -1,16 +1,31 @@
 ---
 name: implementing-ui-bundle-agentforce-conversation-client
-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."
+description: 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 in a React component. Covers styling (colors, fonts, spacing, borders), layout (inline vs floating, width, height, dimensions), and props (agentId, agentLabel, headerEnabled, showHeaderIcon, showAvatar, styleTokens). Also matches references to specific agents (e.g. travel agent, HR agent, support agent, employee agent). Never create a custom agent, chatbot, or chat widget component.
 metadata:
   author: ACC Components
-  version: 1.0.0
+  version: 1.0.1
   package: "@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client"
   sdk-package: "@salesforce/agentforce-conversation-client"
-  last-updated: 2025-03-18
+  last-updated: 2025-04-01
 ---
 
 # Managing Agentforce Conversation Client
 
+**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.
+
+## Prerequisites
+
+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.
+
+**Cookie settings:**
+
+- Setup → My Domain → Disable "Require first party use of Salesforce cookies"
+
+**Trusted domains (required only for local development):**
+
+- Setup → Session Settings → Trusted Domains for Inline Frames → Add your domain
+  - Local development: `localhost:<PORT>` (e.g., `localhost:3000`)
+
 ## Instructions
 
 ### Step 1: Check if component already exists
@@ -73,42 +88,50 @@ Do not infer import path from file discovery alone. Prefer one consistent packag
 
 ### Step 4: Add or update component
 
-**For new installations:**
+Determine which sub-step applies:
+
+- Component NOT found in Step 1 → go to **4a (New installation)**
+- Component found in Step 1 → go to **4b (Update existing)**
+
+#### 4a — New installation
 
-Add to the target React component file using the canonical package import:
+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.
+2. Read the target file to understand its existing imports and TSX structure.
+3. Add the import at the top of the file, alongside existing imports. Use the canonical package import from Step 3:
 
 ```tsx
-import { Outlet } from "react-router";
 import { AgentforceConversationClient } from "@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client";
-
-export default function AgentChatHost() {
-  return (
-    <>
-      <Outlet />
-      <AgentforceConversationClient agentId="0Xx..." />
-    </>
-  );
-}
 ```
 
-**Fallback note:** Use a local relative import only when the user explicitly requests patched/local component usage in that app.
-
-**For updates:**
+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:
+**Example:**
+```tsx
+<AgentforceConversationClient agentId="0Xx8X00000001AbCDE" />
+```
 
-Read the file where component is used and modify only the props that need to change. Preserve all other props. Never delete and recreate.
+5. Do NOT add any other code (wrappers, layout components, new functions) unless the user explicitly requests it.
 
-**Replacing placeholder values:**
+#### 4b — Update existing
 
-If the component has a placeholder agentId (e.g., `agentId="Placeholder"` or `agentId="0Xx..."`), replace it with the real agent ID:
+1. Read the file identified in Step 1.
+2. Locate the existing `<AgentforceConversationClient ... />` TSX element.
+3. Apply **only** the changes the user requested. Rules:
+   - **Add** new props that the user asked for.
+   - **Change** prop values the user asked to update.
+   - **Preserve** every prop and value the user did NOT mention — do not remove, reorder, or reformat them.
+   - **Never** delete the component and recreate it.
+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:
 
 ```tsx
-// Before (template with placeholder)
+// Before
 <AgentforceConversationClient agentId="Placeholder" />
 
-// After (with real agent ID)
+// After
 <AgentforceConversationClient agentId="0Xx8X00000001AbCDE" />
 ```
 
+5. If the current `agentId` is already valid and the user did not ask to change it, leave it as-is.
+
 ### Step 5: Configure props
 
 **Available props (use directly on component):**
@@ -121,6 +144,7 @@ If the component has a placeholder agentId (e.g., `agentId="Placeholder"` or `ag
 - `styleTokens` (object) - For all styling (colors, fonts, spacing)
 - `salesforceOrigin` (string) - Auto-resolved
 - `frontdoorUrl` (string) - Auto-resolved
+- `agentLabel` (string) - header title for agent
 
 **Examples:**
 
@@ -136,6 +160,175 @@ Inline mode with dimensions:
 <AgentforceConversationClient agentId="0Xx..." inline width="420px" height="600px" />
 ```
 
+Adding or updating agent label:
+
+```tsx
+<AgentforceConversationClient agentId="0Xx..." agentLabel="<dummy-agent-label>" />
+```
+
+**Styling rules (mandatory):**
+
+- ALL visual customization (colors, fonts, spacing, borders, radii, shadows) MUST go through the `styleTokens` prop. There are no exceptions.
+- ONLY use token names listed in the tables below. Do NOT invent custom token names.
+- NEVER apply styling via CSS files, `style` attributes, `className`, or wrapper elements. These approaches will not work and will be ignored by the component.
+- 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.
+
+### Container
+
+| Token name            | UI area themed              |
+| --------------------- | --------------------------- |
+| `fabBackground`       | FAB button background color |
+| `containerBackground` | Chat container background   |
+| `headerBackground`    | Header background           |
+| `containerWidth`      | Chat container width        |
+| `chatBorderRadius`    | Chat border radius          |
+| `layoutMaxWidth`      | Layout max width            |
+
+### Agentforce Header
+
+| Token name                      | UI area themed                     |
+| ------------------------------- | ---------------------------------- |
+| `headerBlockBackground`         | Header block background            |
+| `headerBlockBorderBottomWidth`  | Header border bottom width         |
+| `headerBlockBorderBottomStyle`  | Header border bottom style         |
+| `headerBlockBorderBottomColor`  | Header border bottom color         |
+| `headerBlockBorderRadius`       | Header corner radius               |
+| `headerBlockPaddingBlock`       | Header block padding (vertical)    |
+| `headerBlockPaddingInline`      | Header inline padding (horizontal) |
+| `headerBlockMinHeight`          | Header minimum height              |
+| `headerBlockBrandingGap`        | Header branding area gap           |
+| `headerBlockFontFamily`         | Header font family                 |
+| `headerBlockFontWeight`         | Header title font weight           |
+| `headerBlockFontSize`           | Header title font size             |
+| `headerBlockLineHeight`         | Header title line height           |
+| `headerBlockTextColor`          | Header text color                  |
+| `headerBlockIconDisplay`        | Header icon display                |
+| `headerBlockIconMargin`         | Header icon margin                 |
+| `headerBlockIconColor`          | Header icon color                  |
+| `headerBlockIconWidth`          | Header icon width                  |
+| `headerBlockIconHeight`         | Header icon height                 |
+| `headerBlockLogoMaxHeight`      | Header logo max height             |
+| `headerBlockLogoMaxWidth`       | Header logo max width              |
+| `headerBlockLogoMinWidth`       | Header logo min width              |
+| `headerBlockButtonHeight`       | Header action button height        |
+| `headerBlockButtonWidth`        | Header action button width         |
+| `headerBlockButtonPadding`      | Header action button padding       |
+| `headerBlockButtonBorderRadius` | Header action button border radius |
+| `headerBlockHoverBackground`    | Header hover background            |
+| `headerBlockActiveBackground`   | Header active background           |
+| `headerBlockFocusBorder`        | Header focus border                |
+
+### Agentforce Welcome Block
+
+| Token name                          | UI area themed                   |
+| ----------------------------------- | -------------------------------- |
+| `welcomeBlockTextContainerWidth`    | Welcome text container width     |
+| `welcomeBlockFontFamily`            | Welcome block font family        |
+| `welcomeBlockFontSize`              | Welcome block font size          |
+| `welcomeBlockFontWeight`            | Welcome block font weight        |
+| `welcomeBlockLineHeight`            | Welcome block line height        |
+| `welcomeBlockLetterSpacing`         | Welcome block letter spacing     |
+| `welcomeBlockTextColor`             | Welcome block text color         |
+| `welcomeBlockPaddingVertical`       | Welcome block vertical padding   |
+| `welcomeBlockPaddingHorizontal`     | Welcome block horizontal padding |
+| `welcomeBlockTextAnimationDuration` | Welcome text animation duration  |
+
+### Agentforce Messages
+
+| Token name                       | UI area themed                                          |
+| -------------------------------- | ------------------------------------------------------- |
+| `messageBlockBorderRadius`       | Message block border radius                             |
+| `avatarDisplay`                  | Avatar display property (e.g. `block`, `none`)          |
+| `hideMessageActions`             | Message actions display (e.g. `block`, `none` to hide)  |
+| `hideCopyAction`                 | Copy action button display (e.g. `inline-flex`, `none`) |
+| `messageBlockPaddingContainer`   | Message block container padding                         |
+| `messageBlockFontSize`           | Message block font size                                 |
+| `messageBlockBackgroundColor`    | Message block background (base)                         |
+| `messageBlockInboundBorder`      | Inbound message border                                  |
+| `messageBlockOutboundBorder`     | Outbound message border                                 |
+| `messageBlockBodyWidth`          | Message block body width                                |
+| `messageBlockPadding`            | Message block padding                                   |
+| `messageBlockContainerMarginTop` | Message block container top margin                      |
+| `messageBlockLineHeight`         | Message block line height                               |
+
+### Avatar visibility (behavioral config)
+
+Use `renderingConfig.showAvatar` to control whether avatars are rendered in message rows.
+
+- `showAvatar: true` (default) renders avatars.
+- `showAvatar: false` hides avatars by removing them from the DOM.
+
+### Inbound message (agent → customer)
+
+| Token name                                | UI area themed                    |
+| ----------------------------------------- | --------------------------------- |
+| `inboundMessgeTextColor`                  | Inbound message text color (base) |
+| `messageBlockInboundBorderRadius`         | Inbound message border radius     |
+| `messageBlockInboundBackgroundColor`      | Inbound message background        |
+| `messageBlockInboundTextColor`            | Inbound message text color        |
+| `messageBlockInboundWidth`                | Inbound message width             |
+| `messageBlockInboundTextAlign`            | Inbound message text alignment    |
+| `messageBlockInboundHoverBackgroundColor` | Inbound message hover background  |
+
+### Outbound message (customer → agent)
+
+| Token name                            | UI area themed                  |
+| ------------------------------------- | ------------------------------- |
+| `messageBlockOutboundBorderRadius`    | Outbound message border radius  |
+| `messageBlockOutboundBackgroundColor` | Outbound message background     |
+| `messageBlockOutboundTextColor`       | Outbound message text color     |
+| `messageBlockOutboundWidth`           | Outbound message width          |
+| `messageBlockOutboundMarginLeft`      | Outbound message left margin    |
+| `messageBlockOutboundTextAlign`       | Outbound message text alignment |
+
+### Agentforce Input
+
+| Token name                                 | UI area themed                                 |
+| ------------------------------------------ | ---------------------------------------------- |
+| `messageInputPadding`                      | Message input container padding                |
+| `messageInputFooterBorderColor`            | Message input footer border color              |
+| `messageInputBorderRadius`                 | Message input border radius                    |
+| `messageInputBorderTransitionDuration`     | Message input border transition duration       |
+| `messageInputBorderTransitionEasing`       | Message input border transition easing         |
+| `messageInputTextColor`                    | Message input text color                       |
+| `messageInputTextBackgroundColor`          | Message input text background color            |
+| `messageInputFooterBorderFocusColor`       | Message input footer focus border color        |
+| `messageInputFocusShadow`                  | Message input focus shadow                     |
+| `messageInputMaxHeight`                    | Message input max height                       |
+| `messageInputLineHeight`                   | Message input line height                      |
+| `messageInputTextPadding`                  | Message input text padding                     |
+| `messageInputFontWeight`                   | Message input font weight                      |
+| `messageInputFontSize`                     | Message input font size                        |
+| `messageInputOverflowY`                    | Message input overflow Y                       |
+| `messageInputScrollbarWidth`               | Message input scrollbar width                  |
+| `messageInputScrollbarColor`               | Message input scrollbar color                  |
+| `messageInputActionsWidth`                 | Message input actions width                    |
+| `messageInputActionsPaddingRight`          | Message input actions right padding            |
+| `messageInputFooterPlaceholderText`        | Message input placeholder text color           |
+| `messageInputPlaceholderFontWeight`        | Placeholder font weight                        |
+| `messageInputErrorTextColor`               | Message input error text color                 |
+| `messageInputActionsGap`                   | Message input actions gap                      |
+| `messageInputActionsPadding`               | Message input actions padding                  |
+| `messageInputActionButtonSize`             | Message input action button size               |
+| `messageInputActionButtonRadius`           | Message input action button radius             |
+| `messageInputFooterSendButton`             | Message input send button color                |
+| `messageInputSendButtonDisabledColor`      | Message input send button disabled color       |
+| `messageInputActionButtonFocusBorder`      | Message input action button focus border       |
+| `messageInputActionButtonActiveIconColor`  | Message input action button active icon color  |
+| `messageInputActionButtonActiveBackground` | Message input action button active background  |
+| `messageInputSendButtonIconColor`          | Message input send button icon color           |
+| `messageInputFooterSendButtonHoverColor`   | Message input send button hover color          |
+| `messageInputActionButtonHoverShadow`      | Message input action button hover shadow       |
+| `messageInputFilePreviewPadding`           | Message input file preview padding             |
+| `messageInputTextareaMaxHeight`            | Message input textarea max height              |
+| `messageInputTextareaWithImageMaxHeight`   | Message input textarea max height (with image) |
+
+### Agentforce Error Block
+
+| Token name             | UI area themed               |
+| ---------------------- | ---------------------------- |
+| `errorBlockBackground` | Error block background color |
+
 Styling with styleTokens:
 
 ```tsx
@@ -156,7 +349,6 @@ Styling with styleTokens:
 - Inline without header, calculated dimensions
 - Complete host component examples
 
-**For styling:** For ANY color, font, or spacing changes, use `styleTokens` prop only. See `references/style-tokens.md` for complete token list and examples.
 
 **Common mistakes to avoid:** Consult `references/constraints.md` for:
 
@@ -171,16 +363,3 @@ If component doesn't appear or authentication fails, see `references/troubleshoo
 - Agent activation and deployment
 - Localhost trusted domains
 - Cookie restriction settings
-
-## Prerequisites
-
-Before the component will work, the following Salesforce settings must be configured by the user:
-
-**Cookie settings:**
-
-- Setup → My Domain → Disable "Require first party use of Salesforce cookies"
-
-**Trusted domains (required only for local development):**
-
-- Setup → Session Settings → Trusted Domains for Inline Frames → Add your domain
-  - Local development: `localhost:<PORT>` (e.g., `localhost:3000`)