@salesforce/templates 66.5.4 → 66.5.6

package/lib/templates/project/reactb2e/_r_/skills/_k_/docs/embed-examples.md

@@ -1,192 +0,0 @@
-# Embed examples
-
-Detailed examples for configuring the Agentforce Conversation Client. All examples use the `AgentforceConversationClient` React component; the underlying `embedAgentforceClient` API accepts the same `agentforceClientConfig` shape.
-
-> **Important:** Every example requires an `agentId`. The component will not render without one. There is no default agent. Replace `"0Xx000000000000AAA"` in every example with the user's actual agent ID.
-
----
-
-## Floating mode (default rendering mode)
-
-A floating chat widget appears in the bottom-right corner. It starts minimized and expands when the user clicks it. Floating is the default rendering mode — no `renderingConfig` is needed — but `agentId` is always required.
-
-### Minimal
-
-```tsx
-<AgentforceConversationClient
-  agentforceClientConfig={{
-    agentId: "0Xx000000000000AAA",
-  }}
-/>
-```
-
-### Explicit floating
-
-```tsx
-<AgentforceConversationClient
-  agentforceClientConfig={{
-    agentId: "0Xx000000000000AAA",
-    renderingConfig: { mode: "floating" },
-  }}
-/>
-```
-
-### Floating with theming
-
-```tsx
-<AgentforceConversationClient
-  agentforceClientConfig={{
-    agentId: "0Xx000000000000AAA",
-    renderingConfig: { mode: "floating" },
-    styleTokens: {
-      headerBlockBackground: "#032D60",
-      headerBlockTextColor: "#ffffff",
-    },
-  }}
-/>
-```
-
----
-
-## Inline mode
-
-The chat renders inside the parent container at a specific size. Use this when the chat should be part of the page layout rather than an overlay.
-
-### Fixed pixel dimensions
-
-```tsx
-<AgentforceConversationClient
-  agentforceClientConfig={{
-    agentId: "0Xx000000000000AAA",
-    renderingConfig: { mode: "inline", width: 420, height: 600 },
-  }}
-/>
-```
-
-### CSS string dimensions
-
-```tsx
-<AgentforceConversationClient
-  agentforceClientConfig={{
-    agentId: "0Xx000000000000AAA",
-    renderingConfig: { mode: "inline", width: "100%", height: "80vh" },
-  }}
-/>
-```
-
-### Inline filling a sidebar
-
-```tsx
-<div style={{ display: "flex", height: "100vh" }}>
-  <main style={{ flex: 1 }}>{/* App content */}</main>
-  <aside style={{ width: 400 }}>
-    <AgentforceConversationClient
-      agentforceClientConfig={{
-        agentId: "0Xx000000000000AAA",
-        renderingConfig: { mode: "inline", width: "100%", height: "100%" },
-      }}
-    />
-  </aside>
-</div>
-```
-
----
-
-## Theming
-
-Use `styleTokens` to customize colors. Tokens are passed directly to the Agentforce client.
-
-### Brand-colored header
-
-```tsx
-<AgentforceConversationClient
-  agentforceClientConfig={{
-    agentId: "0Xx000000000000AAA",
-    styleTokens: {
-      headerBlockBackground: "#0176d3",
-      headerBlockTextColor: "#ffffff",
-    },
-  }}
-/>
-```
-
-### Full theme example
-
-```tsx
-<AgentforceConversationClient
-  agentforceClientConfig={{
-    agentId: "0Xx000000000000AAA",
-    styleTokens: {
-      headerBlockBackground: "#0176d3",
-      headerBlockTextColor: "#ffffff",
-      messageBlockInboundColor: "#0176d3",
-    },
-  }}
-/>
-```
-
-### Dark theme example
-
-```tsx
-<AgentforceConversationClient
-  agentforceClientConfig={{
-    agentId: "0Xx000000000000AAA",
-    styleTokens: {
-      headerBlockBackground: "#1a1a2e",
-      headerBlockTextColor: "#e0e0e0",
-      messageBlockInboundColor: "#16213e",
-    },
-  }}
-/>
-```
-
----
-
-## Full layout example
-
-Shows the recommended pattern: agent ID passed directly, single render in the app layout.
-
-```tsx
-import { Outlet } from "react-router";
-import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";
-
-export default function AppLayout() {
-  return (
-    <>
-      <Outlet />
-      <AgentforceConversationClient
-        agentforceClientConfig={{
-          agentId: "0Xx000000000000AAA",
-          styleTokens: {
-            headerBlockBackground: "#0176d3",
-            headerBlockTextColor: "#ffffff",
-          },
-        }}
-      />
-    </>
-  );
-}
-```
-
----
-
-## Using the low-level `embedAgentforceClient` API
-
-The React component wraps `embedAgentforceClient`. If you need the raw API (e.g. in a non-React context), the config shape is the same — `agentId` is still required:
-
-```ts
-import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
-
-const { loApp, chatClientComponent } = embedAgentforceClient({
-  container: "#agentforce-container",
-  salesforceOrigin: "https://myorg.my.salesforce.com",
-  agentforceClientConfig: {
-    agentId: "0Xx000000000000AAA",
-    renderingConfig: { mode: "floating" },
-    styleTokens: {
-      headerBlockBackground: "#0176d3",
-      headerBlockTextColor: "#ffffff",
-    },
-  },
-});
-```

package/lib/templates/project/reactb2e/_r_/skills/_k_/docs/troubleshooting.md

@@ -1,51 +0,0 @@
-# Troubleshooting
-
-Common issues when using the Agentforce Conversation Client.
-
----
-
-### Chat widget does not appear
-
-**Cause:** Missing or invalid `agentId`. The component will not render anything without a valid agent ID.
-
-**Solution:**
-
-1. Verify `agentId` is passed in `agentforceClientConfig` — it is required
-2. Confirm the ID is correct (18-character Salesforce record ID, starts with `0Xx`)
-3. Check that the agent exists and is **Active** in **Setup → Agents**
-
-### Chat loads but shows "agent not available"
-
-**Cause:** The agent exists but is not deployed or is inactive.
-
-**Solution:**
-
-1. In **Setup → Agents**, ensure the agent status is **Active**
-2. Verify the agent is deployed to the correct channel
-
-### Authentication error on localhost
-
-**Cause:** `localhost:<PORT>` is not in the org's trusted domains for inline frames.
-
-**Solution:**
-
-1. Go to **Setup → Session Settings → Trusted Domains for Inline Frames**
-2. Add `localhost:<PORT>` (e.g. `localhost:3000`)
-3. Restart the dev server
-
-### Chat fails to authenticate / blank iframe
-
-**Cause:** "Require first party use of Salesforce cookies" is enabled in the org's session settings. This blocks the embedded client from establishing a session.
-
-**Solution:**
-
-1. Go to **Setup → Session Settings**
-2. Find **"Require first party use of Salesforce cookies"**
-3. **Uncheck / disable** this setting
-4. Save and reload the app
-
-### Multiple chat widgets appear
-
-**Cause:** `AgentforceConversationClient` is rendered in multiple places.
-
-**Solution:** Render it once in the app layout, not on individual pages. The component uses a singleton pattern — only one instance should exist per window.

package/lib/templates/project/reactb2e/_r_/skills/feature-graphql-graphql-data-access/SKILL.md

@@ -1,155 +0,0 @@
----
-name: feature-graphql-graphql-data-access
-description: Add or modify Salesforce GraphQL data access code. Use when the user asks to fetch, query, or mutate Salesforce data, or add a GraphQL operation for an object like Account, Contact, or Opportunity.
----
-
-# GraphQL Data Access
-
-Add or modify Salesforce GraphQL data access code using `getDataSDK()` + `data.graphql?.()` and codegen tooling.
-
-## When to Use
-
-- User asks to "fetch data from Salesforce"
-- User asks to "query" or "mutate" Salesforce records
-- User wants to add a new GraphQL operation (query or mutation)
-- User asks to add data access for a Salesforce object (Account, Contact, Opportunity, etc.)
-
-## Prerequisites
-
-The base React app (`base-react-app`) ships with all GraphQL dependencies and tooling pre-configured:
-
-- `@salesforce/sdk-data` — runtime SDK for `getDataSDK` and `gql`
-- `@graphql-codegen/cli` + plugins — type generation from `.graphql` files and inline `gql` queries
-- `@graphql-eslint/eslint-plugin` — linting for `.graphql` files and `gql` template literals
-- `graphql` — shared by codegen, ESLint, and schema introspection
-
-Before using this skill, ensure:
-
-1. The `@salesforce/sdk-data` package is available (provides `getDataSDK`, `gql`, `NodeOfConnection`)
-2. A `schema.graphql` file exists at the project root. If missing, generate it:
-   ```bash
-   npm run graphql:schema
-   ```
-
-## npm Scripts
-
-The base app provides two npm scripts for GraphQL tooling:
-
-- **`npm run graphql:schema`** — Downloads the full GraphQL schema from a connected Salesforce org via introspection. Outputs `schema.graphql` to the project root.
-- **`npm run graphql:codegen`** — Generates TypeScript types from `.graphql` files and inline `gql` queries. Outputs to `src/api/graphql-operations-types.ts`.
-
-## Workflow
-
-### Step 1: Explore the Schema
-
-Before writing any query, verify the target object and its fields exist in the schema.
-
-See `docs/explore-schema.md` for detailed guidance on exploring the Salesforce GraphQL schema.
-
-Key actions:
-
-- Search `schema.graphql` for `type <ObjectName> implements Record` to find available fields
-- Search for `input <ObjectName>_Filter` for filter options
-- Search for `input <ObjectName>_OrderBy` for sorting options
-- For mutations: search for `input <ObjectName>CreateInput` or `<ObjectName>UpdateInput`
-
-### Step 2: Choose the Query Pattern
-
-**Pattern 1 — External `.graphql` file** (recommended for complex queries):
-
-- Queries with variables, fragments, or shared across files
-- Enables full codegen type generation
-- See example: `api/utils/accounts.ts` + `api/utils/query/highRevenueAccountsQuery.graphql`
-
-**Pattern 2 — Inline `gql` tag** (recommended for simple queries):
-
-- Simple queries without variables
-- Colocated with usage code
-- See example: `api/utils/user.ts`
-
-### Step 3: Write the Query
-
-For **Pattern 1**:
-
-1. Create a `.graphql` file under `src/api/utils/query/`
-2. Follow UIAPI structure: `query { uiapi { query { ObjectName(...) { edges { node { ... } } } } } }`
-3. For mutations, see `docs/generate-mutation-query.md`
-4. For read queries, see `docs/generate-read-query.md`
-
-For **Pattern 2**:
-
-1. Define query inline using the `gql` template tag
-2. Ensure the query name matches what codegen expects
-
-### Step 4: Generate Types
-
-```bash
-npm run graphql:codegen
-```
-
-This updates `src/api/graphql-operations-types.ts` with:
-
-- `<OperationName>Query` or `<OperationName>Mutation` — response type
-- `<OperationName>QueryVariables` or `<OperationName>MutationVariables` — input variables type
-
-### Step 5: Implement the Data Access Function
-
-```typescript
-// Pattern 1
-import { getDataSDK, type NodeOfConnection } from "@salesforce/sdk-data";
-import MY_QUERY from "./query/myQuery.graphql?raw";
-import type { GetMyDataQuery, GetMyDataQueryVariables } from "../graphql-operations-types";
-
-type MyNode = NodeOfConnection<GetMyDataQuery["uiapi"]["query"]["MyObject"]>;
-
-export async function getMyData(variables: GetMyDataQueryVariables): Promise<MyNode[]> {
-  const data = await getDataSDK();
-  const response = await data.graphql?.<GetMyDataQuery, GetMyDataQueryVariables>(
-    MY_QUERY,
-    variables,
-  );
-
-  if (response?.errors?.length) {
-    const errorMessages = response.errors.map((e) => e.message).join("; ");
-    throw new Error(`GraphQL Error: ${errorMessages}`);
-  }
-
-  return response?.data?.uiapi?.query?.MyObject?.edges?.map((edge) => edge?.node) || [];
-}
-```
-
-```typescript
-// Pattern 2
-import { getDataSDK, gql } from "@salesforce/sdk-data";
-import type { MySimpleQuery } from "../graphql-operations-types";
-
-const MY_QUERY = gql`
-  query MySimple {
-    uiapi { ... }
-  }
-`;
-
-export async function getSimpleData(): Promise<SomeType> {
-  const data = await getDataSDK();
-  const response = await data.graphql?.<MySimpleQuery>(MY_QUERY);
-  // check response.errors, then extract response.data
-}
-```
-
-### Step 6: Verify
-
-- [ ] Query field names match the schema exactly (case-sensitive)
-- [ ] Response type generic is provided to `data.graphql?.<T>()`
-- [ ] Optional chaining is used for nested response data
-- [ ] Pattern 1: `.graphql` file imported with `?raw` suffix
-- [ ] Pattern 2: Query uses `gql` tag (not plain string)
-- [ ] Generated types imported from `graphql-operations-types.ts`
-
-## Reference
-
-- Schema exploration: `docs/explore-schema.md`
-- Read query generation: `docs/generate-read-query.md`
-- Mutation query generation: `docs/generate-mutation-query.md`
-- Shared GraphQL schema types: `docs/shared-schema.graphqls`
-- Schema download: `npm run graphql:schema` (in the base app)
-- Type generation: `npm run graphql:codegen` (in the base app)

package/lib/templates/project/reactb2e/_r_/skills/feature-graphql-graphql-data-access/docs/explore-schema.md

@@ -1,256 +0,0 @@
-# GraphQL Schema Reference
-
-This document provides guidance for AI agents working with the Salesforce GraphQL API schema in this project.
-
-## Schema File Location
-
-**The complete GraphQL schema is located at: `@schema.graphql`** (in the project root)
-
-> ⚠️ **Important**: The schema file is very large (~265,000+ lines). Do NOT read it entirely. Instead, use targeted searches to find specific types, fields, or operations.
-
-If the file is not present, generate it by running:
-
-```bash
-npm run graphql:schema
-```
-
-## Required Pre-Flight Check
-
-**BEFORE generating any GraphQL query, you MUST:**
-
-1. **Check if schema exists**: Look for `schema.graphql` in the project root
-2. **If schema is missing**:
-   - Run `npm run graphql:schema` to download it
-   - Wait for the command to complete successfully
-   - Then proceed with schema exploration
-3. **If schema exists**: Proceed with targeted searches as described below
-
-> ⚠️ **DO NOT** generate GraphQL queries without first having access to the schema. Standard field assumptions may not match the target org's configuration.
-
-## Schema Structure Overview
-
-The schema follows the Salesforce GraphQL Wire Adapter pattern with these main entry points:
-
-### Query Entry Point
-
-```graphql
-type Query {
-  uiapi: UIAPI!
-}
-```
-
-### UIAPI Structure
-
-```graphql
-type UIAPI {
-  query: RecordQuery! # For querying records
-  aggregate: RecordQueryAggregate! # For aggregate queries
-  objectInfos: [ObjectInfo] # For metadata
-  relatedListByName: RelatedListInfo
-}
-```
-
-### Mutation Entry Point
-
-```graphql
-type Mutation {
-  uiapi(input: UIAPIMutationsInput): UIAPIMutations!
-}
-```
-
-## How to Explore the Schema
-
-When you need to build a GraphQL query, use these search patterns:
-
-### 1. Find Available Fields for a Record Type
-
-Search for `type <ObjectName> implements Record` to find all queryable fields:
-
-```bash
-# Example: Find Account fields
-grep "^type Account implements Record" schema.graphql -A 50
-```
-
-### 2. Find Filter Options for a Record Type
-
-Search for `input <ObjectName>_Filter` to find filterable fields and operators:
-
-```bash
-# Example: Find Account filter options
-grep "^input Account_Filter" schema.graphql -A 30
-```
-
-### 3. Find OrderBy Options
-
-Search for `input <ObjectName>_OrderBy` for sorting options:
-
-```bash
-# Example: Find Account ordering options
-grep "^input Account_OrderBy" schema.graphql -A 20
-```
-
-### 4. Find Mutation Operations
-
-Search for operations in `UIAPIMutations`:
-
-```bash
-# Example: Find Account mutations
-grep "Account.*Create\|Account.*Update\|Account.*Delete" schema.graphql
-```
-
-### 5. Find Input Types for Mutations
-
-Search for `input <ObjectName>CreateInput` or `input <ObjectName>UpdateInput`:
-
-```bash
-# Example: Find Account create input
-grep "^input AccountCreateInput" schema.graphql -A 30
-```
-
-## Common Operator Types
-
-### StringOperators (for text fields)
-
-```graphql
-input StringOperators {
-  eq: String # equals
-  ne: String # not equals
-  like: String # pattern matching (use % as wildcard)
-  lt: String # less than
-  gt: String # greater than
-  lte: String # less than or equal
-  gte: String # greater than or equal
-  in: [String] # in list
-  nin: [String] # not in list
-}
-```
-
-### OrderByClause
-
-```graphql
-input OrderByClause {
-  order: ResultOrder # ASC or DESC
-  nulls: NullOrder # FIRST or LAST
-}
-```
-
-## Query Pattern Examples
-
-### Basic Query Structure
-
-All record queries follow this pattern:
-
-```graphql
-query {
-  uiapi {
-    query {
-      <ObjectName>(
-        first: Int           # pagination limit
-        after: String        # pagination cursor
-        where: <Object>_Filter
-        orderBy: <Object>_OrderBy
-      ) {
-        edges {
-          node {
-            Id
-            <Field> { value }
-            # ... more fields
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-### Example: Query Accounts with Filter
-
-```graphql
-query GetHighRevenueAccounts($minRevenue: Currency) {
-  uiapi {
-    query {
-      Account(
-        where: { AnnualRevenue: { gt: $minRevenue } }
-        orderBy: { AnnualRevenue: { order: DESC } }
-        first: 50
-      ) {
-        edges {
-          node {
-            Id
-            Name {
-              value
-            }
-            AnnualRevenue {
-              value
-            }
-            Industry {
-              value
-            }
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-### Mutation Pattern
-
-```graphql
-mutation CreateAccount($input: AccountCreateInput!) {
-  uiapi(input: { AccountCreate: { input: $input } }) {
-    AccountCreate {
-      Record {
-        Id
-        Name {
-          value
-        }
-      }
-    }
-  }
-}
-```
-
-## Field Value Wrappers
-
-Salesforce GraphQL returns field values wrapped in typed objects:
-
-| Wrapper Type    | Access Pattern                     |
-| --------------- | ---------------------------------- |
-| `StringValue`   | `FieldName { value }`              |
-| `IntValue`      | `FieldName { value }`              |
-| `BooleanValue`  | `FieldName { value }`              |
-| `DateTimeValue` | `FieldName { value displayValue }` |
-| `PicklistValue` | `FieldName { value displayValue }` |
-| `CurrencyValue` | `FieldName { value displayValue }` |
-
-## Agent Workflow for Building Queries
-
-**Pre-requisites (MANDATORY):**
-
-- [ ] Verified `schema.graphql` exists in project root
-- [ ] If missing, ran `npm run graphql:schema` and waited for completion
-- [ ] Confirmed connection to correct Salesforce org (if downloading fresh schema)
-
-**Workflow Steps:**
-
-1. **Identify the target object** (e.g., Account, Contact, Opportunity)
-2. **Search the schema** for the object type to discover available fields
-3. **Search for filter input** (`<Object>_Filter`) to understand filtering options
-4. **Search for orderBy input** (`<Object>_OrderBy`) for sorting capabilities
-5. **Build the query** following the patterns above
-6. **Validate field names** match exactly as defined in the schema (case-sensitive)
-
-## Tips for Agents
-
-- **Always verify field names** by searching the schema before generating queries
-- **Use grep/search** to explore the schema efficiently—never read the entire file
-- **Check relationships** by looking for `parentRelationship` and `childRelationship` comments in type definitions
-- **Look for Connection types** (e.g., `AccountConnection`) to understand pagination structure
-- **Custom objects** end with `__c` (e.g., `CustomObject__c`)
-- **Custom fields** also end with `__c` (e.g., `Custom_Field__c`)
-
-## Related Documentation
-
-- For generating mutations and queries, see `generate-mutation-query.md`
-- For generating read queries, see `generate-read-query.md`