mirror of https://github.com/forcedotcom/afv-library.git synced 2026-08-01 12:20:24 +08:00

Rename webapplication skills to ui-bundle @W-21338965@ (#136 )

* Rename webapplication skills to ui-bundle

Rename all 7 webapplication skill directories and their content to use
the "ui-bundle" / "UIBundle" naming convention, aligning with the
New++ (TDX) naming strategy.

Directory renames:
- deploying-webapplication → deploying-ui-bundle
- generating-webapplication-{features,metadata,ui} → generating-ui-bundle-*
- implementing-webapplication-{agentforce-conversation-client,file-upload} → implementing-ui-bundle-*
- using-webapplication-salesforce-data → using-ui-bundle-salesforce-data

Content updates across all skills:
- Frontmatter name fields
- Prose: "web application" → "UI bundle"
- Metadata refs: WebApplication → UIBundle, webapplications/ → uiBundles/
- CLI: sf webapp → sf ui-bundle
- NPM packages per rename table
- Cross-skill references and generating-experience-react-site refs

* Rename generating-ui-bundle-ui skill to building-ui-bundle-frontend

The "ui-bundle-ui" name was confusing. "building-ui-bundle-frontend"
better conveys that this skill handles the React frontend layer
within a UI bundle.

---------

Co-authored-by: gbockus-sf <76090802+gbockus-sf@users.noreply.github.com>

2026-03-30 15:17:38 -05:00

3.0 KiB

Raw Blame History

Style Tokens Reference

This document explains how to use styleTokens for theming and styling the AgentforceConversationClient.

Overview

The styleTokens prop is the ONLY way to customize the appearance of the Agentforce conversation client. It accepts an object with style token keys and CSS values.

Source of Truth

For the complete and always up-to-date list of all 60+ style tokens, see:

@salesforce/agentforce-conversation-client on npm

The npm package README contains the definitive documentation with all available style tokens.

Token Categories

Style tokens are organized by UI area:

Header (7 tokens): background, text color, hover, active, focus, border, font family
Messages (10 tokens): colors, padding, margins, border radius, fonts, body width
Inbound messages (5 tokens): background, text color, width, alignment, hover
Outbound messages (5 tokens): background, text color, width, alignment, margin
Input (33 tokens): colors, borders, fonts, padding, buttons, scrollbar, textarea, actions

Common Use Cases

Change header color

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    headerBlockBackground: "#0176d3",
    headerBlockTextColor: "#ffffff",
  }}
/>

Change message colors

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    messageBlockInboundBackgroundColor: "#4CAF50",
    messageBlockInboundTextColor: "#ffffff",
    messageBlockOutboundBackgroundColor: "#f5f5f5",
    messageBlockOutboundTextColor: "#333333",
  }}
/>

Apply brand colors

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    headerBlockBackground: "#1a73e8",
    headerBlockTextColor: "#ffffff",
    messageBlockInboundBackgroundColor: "#1a73e8",
    messageBlockInboundTextColor: "#ffffff",
    messageInputFooterSendButton: "#1a73e8",
    messageInputFooterSendButtonHoverColor: "#1557b0",
  }}
/>

Adjust spacing and fonts

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    messageInputFontSize: "16px",
    messageBlockBorderRadius: "12px",
    messageBlockPadding: "16px",
    messageInputPadding: "12px",
  }}
/>

How to Find Token Names

Check the @salesforce/agentforce-conversation-client npm package for the complete list of all tokens
Token names follow a pattern:
- headerBlock* - Header area
- messageBlock* - Message bubbles
- messageBlockInbound* - Messages from customer to agent
- messageBlockOutbound* - Messages from agent to customer
- messageInput* - Input field and send button

Important Notes

You do NOT need to provide all tokens - only override the ones you want to change
Token values are CSS strings (e.g., "#FF0000", "16px", "bold")
Invalid token names are silently ignored
The component uses default values for any tokens you don't specify

3.0 KiB Raw Blame History