mirror of https://github.com/forcedotcom/afv-library.git synced 2026-08-04 06:07:12 +08:00

feat: syncing webapp skills sync to afv @W-21338965@ (#57 )

* feat: removing old webapp skills

* feat: adding sync of skills from webapps to afv

* feat: adding the first iteration of skills

* feat: pin template deps to latest npm versions and flatten skill folders

- Add pin-template-deps.js to resolve "*" deps to exact npm versions
- Integrate pinning into sync-template-skills npm script
- Remove check-template-skills-versions.js (no longer needed)
- Simplify workflow to single sync step
- Flatten skill output: one folder per skill with cleaned names

Made-with: Cursor

* fix: resolve skill validation errors

- Move .template-versions.json from skills/ to root
- Shorten skill names to meet 64-char limit:
  - salesforce-webapp-feature-micro-frontend-generating-micro-frontend-lwc → salesforce-webapp-micro-frontend-lwc
  - salesforce-webapp-feature-react-agentforce-conversation-client-integrating-agentforce-conversation-client → salesforce-webapp-agentforce-conversation-client
  - salesforce-webapp-feature-react-file-upload-implementing-file-upload → salesforce-webapp-react-file-upload
- Expand descriptions to meet 20-word minimum with trigger context

* Add webapp skills from template, sync script updates

- Rename skill folders from salesforce-webapp-* to *-webapp-* convention
- Update sync-template-skills.js: set SKILL.md front matter name to dest folder
- Remove sync-template-skills workflow and pin-template-deps script
- Add .synced-template-skills.json manifest, deploying-webapp-to-salesforce skill
- Replace salesforce-webapp-designing-webapp-ui-ux with designing-webapp-ui-ux

Made-with: Cursor

* Align SKILL.md front matter name with folder for all webapp skills

Made-with: Cursor

* Fix skill validation: description length and trigger context for configuring-webapp-metadata, creating-webapp

Made-with: Cursor

* Rename sync script to sync-webapp-skills, drop manifest file

- Rename sync-template-skills.js to sync-webapp-skills.js
- Update package.json script to sync-webapp-skills
- Remove .synced-template-skills.json creation and add to .gitignore

Made-with: Cursor

* Revert sync-react-b2e-sample and sync-react-b2x-sample to upstream version

Made-with: Cursor

* Sync script: pin b2e and b2x to latest, sync skills from template

- Pin both template packages to latest in sync-webapp-skills.js
- Update package.json / package-lock.json (b2x 1.109.0)
- Sync skills: managing-webapp-agentforce-conversation-client, bar-line-chart,
  remove building-webapp-analytics-charts and integrating-webapp-agentforce-conversation-client
- Minor skill content updates

Made-with: Cursor

* Remove interactive map, weather widget, and Unsplash skills (no longer in template)

Made-with: Cursor

---------

Co-authored-by: Hemant Singh Bisht <hsinghbisht@salesforce.com>

2026-03-19 22:46:27 +05:30

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