mirror of https://github.com/forcedotcom/afv-library.git synced 2026-08-03 05:41:08 +08:00

Consolidate webapp skills into three focused skills

Merge 10 granular webapp skills into 3 consolidated skills:
- generating-webapp-ui: pages, components, layout, navigation, design
- generating-webapp-metadata: scaffolding, bundles, CSP, deployment
- generating-webapp-features: feature CLI (search, describe, install)

Keep standalone: implementing-webapp-file-upload,
implementing-webapp-agentforce-conversation-client (renamed from managing-),
using-webapp-salesforce-data.

Remove data visualization skill (not helpful).
Remove system-level instructions (a4drules refs, shell commands).
Incorporate Anthropic frontend-design skill content into UI skill.

2026-03-26 16:49:28 -07: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