mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-31 20:12:16 +08:00
f39ac26c0d
* 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. * Fix frontmatter name to match directory for agentforce skill --------- Co-authored-by: Hemant Singh Bisht <hsinghbisht@salesforce.com>
133 lines
2.6 KiB
Markdown
133 lines
2.6 KiB
Markdown
# Additional Examples
|
|
|
|
Essential examples for common patterns and combinations. All use flat props API.
|
|
|
|
---
|
|
|
|
## Layout Patterns
|
|
|
|
### Sidebar Chat
|
|
|
|
```tsx
|
|
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
|
|
|
|
```tsx
|
|
export default function SupportPage() {
|
|
return (
|
|
<div>
|
|
<h1>Customer Support</h1>
|
|
<AgentforceConversationClient agentId="0Xx..." inline width="100%" height="600px" />
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Size Variations
|
|
|
|
### Responsive sizing
|
|
|
|
```tsx
|
|
<AgentforceConversationClient agentId="0Xx..." inline width="100%" height="80vh" />
|
|
```
|
|
|
|
### Calculated dimensions
|
|
|
|
```tsx
|
|
<AgentforceConversationClient agentId="0Xx..." inline width="500px" height="calc(100vh - 100px)" />
|
|
```
|
|
|
|
---
|
|
|
|
## Theming Combinations
|
|
|
|
### Brand theme with custom sizing
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="0Xx..."
|
|
inline
|
|
width="500px"
|
|
height="700px"
|
|
styleTokens={{
|
|
headerBlockBackground: "#0176d3",
|
|
headerBlockTextColor: "#ffffff",
|
|
messageBlockInboundBackgroundColor: "#0176d3",
|
|
messageBlockInboundTextColor: "#ffffff",
|
|
messageInputFooterSendButton: "#0176d3",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### Dark theme
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="0Xx..."
|
|
styleTokens={{
|
|
headerBlockBackground: "#1a1a1a",
|
|
headerBlockTextColor: "#ffffff",
|
|
messageBlockInboundBackgroundColor: "#2d2d2d",
|
|
messageBlockInboundTextColor: "#ffffff",
|
|
messageBlockOutboundBackgroundColor: "#3a3a3a",
|
|
messageBlockOutboundTextColor: "#f0f0f0",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### Inline without header
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="0Xx..."
|
|
inline
|
|
width="100%"
|
|
height="600px"
|
|
headerEnabled={false}
|
|
styleTokens={{
|
|
messageBlockBorderRadius: "12px",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
## Complete Host Component Example
|
|
|
|
```tsx
|
|
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`.
|