mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
a779945206
* 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.
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`.
|