mirror of https://github.com/forcedotcom/afv-library.git synced 2026-07-30 03:09:50 +08:00

Rename webapp/webapplication to UI bundle in skills (#129 )

* Split generating-webapp-metadata into single-purpose skills

Extract the deployment sequence into a new deploying-webapp skill so each
webapp skill describes exactly one actionable goal. This improves agent
skill selection accuracy by eliminating multi-concern descriptions.

- generating-webapp-metadata: now focused on scaffolding, bundle config, CSP
- deploying-webapp: new skill for the 7-step deployment sequence

* Rename -webapp- skill directories and references to -webapplication-

Rename all 7 webapp skill directories to use the full "webapplication"
entity name. Update frontmatter name fields, cross-skill references,
and descriptive prose. Package names and CLI commands are preserved
as-is since those are actual identifiers.

2026-03-30 11:49:19 -05:00

2.6 KiB

Raw Blame History

Additional Examples

Essential examples for common patterns and combinations. All use flat props API.

Layout Patterns

Sidebar Chat

export default function DashboardWithChat() {
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <main style={{ flex: 1 }}>{/* Main content */}</main>
      <aside style={{ width: 400 }}>
        <AgentforceConversationClient agentId="0Xx..." inline width="100%" height="100%" />
      </aside>
    </div>
  );
}

Full Page Chat

export default function SupportPage() {
  return (
    <div>
      <h1>Customer Support</h1>
      <AgentforceConversationClient agentId="0Xx..." inline width="100%" height="600px" />
    </div>
  );
}

Size Variations

Responsive sizing

<AgentforceConversationClient agentId="0Xx..." inline width="100%" height="80vh" />

Calculated dimensions

<AgentforceConversationClient agentId="0Xx..." inline width="500px" height="calc(100vh - 100px)" />

Theming Combinations

Brand theme with custom sizing

<AgentforceConversationClient
  agentId="0Xx..."
  inline
  width="500px"
  height="700px"
  styleTokens={{
    headerBlockBackground: "#0176d3",
    headerBlockTextColor: "#ffffff",
    messageBlockInboundBackgroundColor: "#0176d3",
    messageBlockInboundTextColor: "#ffffff",
    messageInputFooterSendButton: "#0176d3",
  }}
/>

Dark theme

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    headerBlockBackground: "#1a1a1a",
    headerBlockTextColor: "#ffffff",
    messageBlockInboundBackgroundColor: "#2d2d2d",
    messageBlockInboundTextColor: "#ffffff",
    messageBlockOutboundBackgroundColor: "#3a3a3a",
    messageBlockOutboundTextColor: "#f0f0f0",
  }}
/>

Inline without header

<AgentforceConversationClient
  agentId="0Xx..."
  inline
  width="100%"
  height="600px"
  headerEnabled={false}
  styleTokens={{
    messageBlockBorderRadius: "12px",
  }}
/>

Complete Host Component Example

import { Outlet } from "react-router";
import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";

export default function AgentChatHost() {
  return (
    <>
      <Outlet />
      <AgentforceConversationClient
        agentId="0Xx..."
        styleTokens={{
          headerBlockBackground: "#0176d3",
          headerBlockTextColor: "#ffffff",
        }}
      />
    </>
  );
}

For complete style token reference, see references/style-tokens.md or node_modules/@salesforce/agentforce-conversation-client/README.md.

2.6 KiB Raw Blame History