mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-31 04:01:24 +08:00
c611126c2f
* Rename webapplication skills to ui-bundle
Rename all 7 webapplication skill directories and their content to use
the "ui-bundle" / "UIBundle" naming convention, aligning with the
New++ (TDX) naming strategy.
Directory renames:
- deploying-webapplication → deploying-ui-bundle
- generating-webapplication-{features,metadata,ui} → generating-ui-bundle-*
- implementing-webapplication-{agentforce-conversation-client,file-upload} → implementing-ui-bundle-*
- using-webapplication-salesforce-data → using-ui-bundle-salesforce-data
Content updates across all skills:
- Frontmatter name fields
- Prose: "web application" → "UI bundle"
- Metadata refs: WebApplication → UIBundle, webapplications/ → uiBundles/
- CLI: sf webapp → sf ui-bundle
- NPM packages per rename table
- Cross-skill references and generating-experience-react-site refs
* Rename generating-ui-bundle-ui skill to building-ui-bundle-frontend
The "ui-bundle-ui" name was confusing. "building-ui-bundle-frontend"
better conveys that this skill handles the React frontend layer
within a UI bundle.
---------
Co-authored-by: gbockus-sf <76090802+gbockus-sf@users.noreply.github.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/ui-bundle-template-feature-react-agentforce-conversation-client";
|
|
|
|
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`.
|