mirror of https://github.com/forcedotcom/afv-library.git synced 2026-08-08 16:25:58 +08:00

feat: pin template deps to latest npm versions and flatten skill folders

- Add pin-template-deps.js to resolve "*" deps to exact npm versions
- Integrate pinning into sync-template-skills npm script
- Remove check-template-skills-versions.js (no longer needed)
- Simplify workflow to single sync step
- Flatten skill output: one folder per skill with cleaned names

Made-with: Cursor

2026-03-18 15:06:43 -07:00

2.1 KiB

Raw Blame History

Embed examples (flat-prop API)

All examples use AgentforceConversationClient with flat props.

agentId is required in practice. Use this placeholder pattern in examples: "<USER_AGENT_ID_18_CHAR_0Xx...>".

Floating mode (default)

<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />

Explicit floating

<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />

Inline mode

Fixed pixels

<AgentforceConversationClient
  agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
  inline
  width={420}
  height={600}
/>

CSS string size

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

Inline sidebar

<div style={{ display: "flex", height: "100vh" }}>
  <main style={{ flex: 1 }}>{/* App content */}</main>
  <aside style={{ width: 400 }}>
    <AgentforceConversationClient
      agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
      inline
      width="100%"
      height="100%"
    />
  </aside>
</div>

Theming

<AgentforceConversationClient
  agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
  styleTokens={{
    headerBlockBackground: "#0176d3",
    headerBlockTextColor: "#ffffff",
    messageBlockInboundColor: "#0176d3",
  }}
/>

Inline with header enabled

<AgentforceConversationClient
  agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
  inline
  width={420}
  height={600}
  headerEnabled
/>

headerEnabled defaults to true for floating mode, and you can use it in inline mode to add/remove the header.

Full layout example

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

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

2.1 KiB Raw Blame History