@schandlergarcia/sf-web-components 2.0.0 → 2.1.0

package/brands/engine/useEvaAgent.ts

@@ -0,0 +1,288 @@
+/**
+ * useEvaAgent — React hook for the Agentforce Agent REST API
+ *
+ * Handles the full lifecycle:
+ *   1. OAuth client-credentials → access_token
+ *   2. POST …/sessions → sessionId + message href
+ *   3. POST …/messages → agent response text
+ *   4. DELETE …/sessions → cleanup on unmount
+ *
+ * All HTTP calls go through the Vite proxy (see vite.config.ts):
+ *   /sf-oauth/*  → myDomainUrl
+ *   /sf-agent/*  → agentApiBaseUrl
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AGENT_API_CONFIG } from "@/config/agentApi";
+
+export interface AgentMessage {
+  role: "user" | "agent";
+  text: string;
+  id: string;
+  timestamp: string;
+}
+
+interface SessionState {
+  accessToken: string;
+  sessionId: string;
+  messagesHref: string;
+  endHref: string;
+}
+
+export default function useEvaAgent() {
+  const [messages, setMessages] = useState<AgentMessage[]>([]);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const sessionRef = useRef<SessionState | null>(null);
+  const sequenceRef = useRef(1);
+  const abortRef = useRef<AbortController | null>(null);
+
+  /* ── Step 1: OAuth token ──────────────────────────────── */
+  async function authenticate(signal: AbortSignal): Promise<string> {
+    const { clientId, clientSecret } = AGENT_API_CONFIG;
+
+    const body = new URLSearchParams({
+      grant_type: "client_credentials",
+      client_id: clientId,
+      client_secret: clientSecret,
+    });
+
+    const res = await fetch("/sf-oauth/services/oauth2/token", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body,
+      signal,
+    });
+
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`OAuth failed (${res.status}): ${text}`);
+    }
+
+    const data = await res.json();
+    return data.access_token;
+  }
+
+  /* ── Step 2: Create session ───────────────────────────── */
+  async function createSession(
+    accessToken: string,
+    signal: AbortSignal
+  ): Promise<Omit<SessionState, "accessToken">> {
+    const { agentId, bypassUser, demoTraveler, myDomainUrl } =
+      AGENT_API_CONFIG;
+
+    const payload = {
+      externalSessionKey: crypto.randomUUID(),
+      instanceConfig: { endpoint: myDomainUrl },
+      streamingCapabilities: { chunkTypes: ["Text"] },
+      bypassUser,
+      variables: [
+        {
+          name: "$Context.EndUserId",
+          type: "Text",
+          value: demoTraveler.contactId,
+        },
+        {
+          name: "$Context.EndUserEmail",
+          type: "Text",
+          value: demoTraveler.email,
+        },
+        {
+          name: "$Context.EndUserFirstName",
+          type: "Text",
+          value: demoTraveler.firstName,
+        },
+        {
+          name: "$Context.EndUserLastName",
+          type: "Text",
+          value: demoTraveler.lastName,
+        },
+      ],
+    };
+
+    const res = await fetch(
+      `/sf-agent/einstein/ai-agent/v1/agents/${agentId}/sessions`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+        signal,
+      }
+    );
+
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`Session creation failed (${res.status}): ${text}`);
+    }
+
+    const data = await res.json();
+    return {
+      sessionId: data.sessionId,
+      messagesHref: data._links?.messages?.href ?? "",
+      endHref: data._links?.end?.href ?? "",
+    };
+  }
+
+  /* ── Step 3: Send message ─────────────────────────────── */
+  const sendMessage = useCallback(async (text: string) => {
+    const session = sessionRef.current;
+    if (!session) return;
+
+    const userMsg: AgentMessage = {
+      role: "user",
+      text,
+      id: `user-${Date.now()}`,
+      timestamp: new Date().toISOString(),
+    };
+    setMessages((prev) => [...prev, userMsg]);
+    setIsSending(true);
+
+    try {
+      const seqId = sequenceRef.current++;
+
+      const messagesUrl = session.messagesHref.startsWith("http")
+        ? `/sf-agent${new URL(session.messagesHref).pathname}`
+        : `/sf-agent${session.messagesHref}`;
+
+      const res = await fetch(messagesUrl, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${session.accessToken}`,
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          message: { sequenceId: seqId, type: "Text", text },
+        }),
+      });
+
+      if (!res.ok) {
+        const errText = await res.text();
+        throw new Error(`Agent message failed (${res.status}): ${errText}`);
+      }
+
+      const data = await res.json();
+
+      const agentTexts: string[] = [];
+      if (Array.isArray(data.messages)) {
+        for (const m of data.messages) {
+          if (m.type === "Inform" && m.message) {
+            agentTexts.push(m.message);
+          } else if (m.type === "Text" && m.message) {
+            agentTexts.push(m.message);
+          }
+        }
+      }
+
+      const responseText =
+        agentTexts.length > 0
+          ? agentTexts.join("\n\n")
+          : data.message ?? "No response from agent.";
+
+      const agentMsg: AgentMessage = {
+        role: "agent",
+        text: responseText,
+        id: `agent-${Date.now()}`,
+        timestamp: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, agentMsg]);
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "Unknown error";
+      setError(msg);
+      const errMsg: AgentMessage = {
+        role: "agent",
+        text: `Error: ${msg}`,
+        id: `error-${Date.now()}`,
+        timestamp: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, errMsg]);
+    } finally {
+      setIsSending(false);
+    }
+  }, []);
+
+  /* ── Step 4: End session ──────────────────────────────── */
+  const endSession = useCallback(async () => {
+    const session = sessionRef.current;
+    if (!session) return;
+
+    try {
+      const endUrl = session.endHref.startsWith("http")
+        ? `/sf-agent${new URL(session.endHref).pathname}`
+        : `/sf-agent${session.endHref}`;
+
+      await fetch(endUrl, {
+        method: "DELETE",
+        headers: { Authorization: `Bearer ${session.accessToken}` },
+      });
+    } catch {
+      /* best-effort cleanup */
+    }
+
+    sessionRef.current = null;
+    setIsReady(false);
+  }, []);
+
+  /* ── Init: authenticate + create session on mount ─────── */
+  const connect = useCallback(async () => {
+    if (sessionRef.current) return;
+
+    abortRef.current = new AbortController();
+    const { signal } = abortRef.current;
+
+    setIsConnecting(true);
+    setError(null);
+
+    try {
+      const accessToken = await authenticate(signal);
+      const session = await createSession(accessToken, signal);
+
+      sessionRef.current = { accessToken, ...session };
+      sequenceRef.current = 1;
+      setIsReady(true);
+    } catch (err: unknown) {
+      if ((err as Error).name !== "AbortError") {
+        const msg = err instanceof Error ? err.message : "Connection failed";
+        setError(msg);
+      }
+    } finally {
+      setIsConnecting(false);
+    }
+  }, []);
+
+  /* ── Cleanup on unmount ───────────────────────────────── */
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+      if (sessionRef.current) {
+        const session = sessionRef.current;
+        const endUrl = session.endHref.startsWith("http")
+          ? `/sf-agent${new URL(session.endHref).pathname}`
+          : `/sf-agent${session.endHref}`;
+
+        fetch(endUrl, {
+          method: "DELETE",
+          headers: { Authorization: `Bearer ${session.accessToken}` },
+        }).catch(() => {});
+        sessionRef.current = null;
+      }
+    };
+  }, []);
+
+  return {
+    messages,
+    isConnecting,
+    isReady,
+    isSending,
+    error,
+    connect,
+    sendMessage,
+    endSession,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -27,6 +27,7 @@
   "files": [
     "dist",
     "scripts",
+    "brands",
     "src/templates",
     "src/components",
     "src/lib",
@@ -50,7 +51,10 @@
     "postinstall": "node scripts/postinstall.mjs",
     "reset:command-center": "bash scripts/reset-command-center.sh",
     "validate:dashboard": "bash scripts/validate-dashboard.sh",
-    "graphql:schema": "node scripts/get-graphql-schema.mjs"
+    "graphql:schema": "node scripts/get-graphql-schema.mjs",
+    "brand:engine": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs engine",
+    "brand:reset": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --reset",
+    "brand:list": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --list"
   },
   "peerDependencies": {
     "@heroicons/react": "^2.0.0",

package/scripts/apply-brand.mjs

@@ -0,0 +1,178 @@
+#!/usr/bin/env node
+
+/**
+ * apply-brand.mjs — Apply a brand theme to the project.
+ *
+ * Usage:
+ *   node scripts/apply-brand.mjs engine     # Apply Engine brand
+ *   node scripts/apply-brand.mjs --list     # List available brands
+ *   node scripts/apply-brand.mjs --reset    # Remove brand, restore neutral theme
+ *
+ * When run from a consuming project (via npm run brand:engine), the script
+ * detects the package location automatically.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const arg = process.argv[2];
+
+if (!arg) {
+  console.error('Usage: node scripts/apply-brand.mjs <brand-name|--list|--reset>');
+  process.exit(1);
+}
+
+const cwd = process.cwd();
+const PACKAGE_NAME = '@schandlergarcia/sf-web-components';
+
+function findPackageRoot() {
+  const fromNodeModules = path.join(cwd, 'node_modules', PACKAGE_NAME);
+  if (fs.existsSync(fromNodeModules)) return fromNodeModules;
+
+  const fromScript = path.resolve(__dirname, '..');
+  if (fs.existsSync(path.join(fromScript, 'brands'))) return fromScript;
+
+  return null;
+}
+
+const packageRoot = findPackageRoot();
+if (!packageRoot) {
+  console.error('Could not find package root. Run from the project directory.');
+  process.exit(1);
+}
+
+const brandsDir = path.join(packageRoot, 'brands');
+
+if (arg === '--list') {
+  if (!fs.existsSync(brandsDir)) {
+    console.log('No brands available.');
+    process.exit(0);
+  }
+  const brands = fs.readdirSync(brandsDir).filter(d =>
+    fs.statSync(path.join(brandsDir, d)).isDirectory()
+  );
+  console.log(`Available brands: ${brands.join(', ') || '(none)'}`);
+  process.exit(0);
+}
+
+if (arg === '--reset') {
+  const neutralCSS = path.join(packageRoot, 'src/styles/global.css');
+  const targetCSS = path.join(cwd, 'src/styles/global.css');
+  if (fs.existsSync(neutralCSS)) {
+    fs.copyFileSync(neutralCSS, targetCSS);
+    console.log('  ✓ Restored neutral theme (global.css)');
+  }
+  const brandMarker = path.join(cwd, '.brand');
+  if (fs.existsSync(brandMarker)) fs.unlinkSync(brandMarker);
+  console.log('\n✅ Brand reset to neutral.\n');
+  process.exit(0);
+}
+
+const brandName = arg;
+const brandDir = path.join(brandsDir, brandName);
+
+if (!fs.existsSync(brandDir)) {
+  console.error(`Brand "${brandName}" not found in ${brandsDir}`);
+  const available = fs.existsSync(brandsDir)
+    ? fs.readdirSync(brandsDir).filter(d => fs.statSync(path.join(brandsDir, d)).isDirectory())
+    : [];
+  if (available.length) console.error(`Available: ${available.join(', ')}`);
+  process.exit(1);
+}
+
+console.log(`\n🎨 Applying "${brandName}" brand...\n`);
+
+let installed = 0;
+
+// 1. global.css → src/styles/global.css (always overwrite)
+const brandCSS = path.join(brandDir, 'global.css');
+const targetCSS = path.join(cwd, 'src/styles/global.css');
+if (fs.existsSync(brandCSS)) {
+  fs.mkdirSync(path.dirname(targetCSS), { recursive: true });
+  fs.copyFileSync(brandCSS, targetCSS);
+  console.log('  ✓ Brand theme applied (global.css)');
+  installed++;
+}
+
+// 2. Sample data files → src/data/
+const dataFiles = [
+  { src: 'engine-sample-data.js', dst: 'src/data/engine-sample-data.js' },
+  { src: 'engine-live-data.js', dst: 'src/data/engine-live-data.js' },
+];
+for (const { src, dst } of dataFiles) {
+  const srcPath = path.join(brandDir, src);
+  const dstPath = path.join(cwd, dst);
+  if (fs.existsSync(srcPath)) {
+    fs.mkdirSync(path.dirname(dstPath), { recursive: true });
+    fs.copyFileSync(srcPath, dstPath);
+    console.log(`  ✓ Installed ${dst}`);
+    installed++;
+  }
+}
+
+// 3. Hooks → src/hooks/
+const hooks = [
+  { src: 'useEngineLiveData.ts', dst: 'src/hooks/useEngineLiveData.ts' },
+  { src: 'useEvaAgent.ts', dst: 'src/hooks/useEvaAgent.ts' },
+];
+for (const { src, dst } of hooks) {
+  const srcPath = path.join(brandDir, src);
+  const dstPath = path.join(cwd, dst);
+  if (fs.existsSync(srcPath)) {
+    fs.mkdirSync(path.dirname(dstPath), { recursive: true });
+    fs.copyFileSync(srcPath, dstPath);
+    console.log(`  ✓ Installed ${dst}`);
+    installed++;
+  }
+}
+
+// 4. Config files → src/config/
+const configs = [
+  { src: 'agentApiConfig.ts', dst: 'src/config/agentApi.ts' },
+];
+for (const { src, dst } of configs) {
+  const srcPath = path.join(brandDir, src);
+  const dstPath = path.join(cwd, dst);
+  if (fs.existsSync(srcPath)) {
+    fs.mkdirSync(path.dirname(dstPath), { recursive: true });
+    fs.copyFileSync(srcPath, dstPath);
+    console.log(`  ✓ Installed ${dst}`);
+    installed++;
+  }
+}
+
+// 5. PRD → project root
+const prd = path.join(brandDir, 'engine-command-center-prd.md');
+if (fs.existsSync(prd)) {
+  fs.copyFileSync(prd, path.join(cwd, 'engine-command-center-prd.md'));
+  console.log('  ✓ Installed engine-command-center-prd.md');
+  installed++;
+}
+
+// 6. Schema → project root
+const schema = path.join(brandDir, 'schema.graphql');
+if (fs.existsSync(schema)) {
+  fs.copyFileSync(schema, path.join(cwd, 'schema.graphql'));
+  console.log('  ✓ Installed schema.graphql');
+  installed++;
+}
+
+// 7. Logo → src/assets/images/
+const logo = path.join(brandDir, 'engine_logo.png');
+if (fs.existsSync(logo)) {
+  const logoTarget = path.join(cwd, 'src/assets/images/engine_logo.png');
+  fs.mkdirSync(path.dirname(logoTarget), { recursive: true });
+  fs.copyFileSync(logo, logoTarget);
+  console.log('  ✓ Installed engine_logo.png');
+  installed++;
+}
+
+// 8. Write .brand marker so reset script knows which brand is active
+fs.writeFileSync(path.join(cwd, '.brand'), brandName + '\n', 'utf-8');
+
+console.log(`\n✅ "${brandName}" brand applied (${installed} files installed).`);
+console.log('   Run "npm run brand:reset" to revert to neutral theme.\n');

package/scripts/postinstall.mjs

@@ -335,6 +335,20 @@ if (fs.existsSync(packageJsonPath)) {
       scriptsAdded.push('validate:dashboard');
     }
 
+    // Add brand scripts
+    if (!packageJson.scripts['brand:engine']) {
+      packageJson.scripts['brand:engine'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs engine';
+      scriptsAdded.push('brand:engine');
+    }
+    if (!packageJson.scripts['brand:reset']) {
+      packageJson.scripts['brand:reset'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --reset';
+      scriptsAdded.push('brand:reset');
+    }
+    if (!packageJson.scripts['brand:list']) {
+      packageJson.scripts['brand:list'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --list';
+      scriptsAdded.push('brand:list');
+    }
+
     if (scriptsAdded.length > 0) {
       fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
       scriptsAdded.forEach(script => {

package/scripts/reset-command-center.sh

@@ -398,24 +398,45 @@ echo "→ Cleaning caches…"
 rm -rf node_modules/.vite 2>/dev/null && echo "  ✓ Cleared Vite cache" || true
 echo ""
 
-# ── 9. Restore neutral global.css ────────────────────────────────────────────
+# ── 9. Restore global.css (brand-aware) ──────────────────────────────────────
 
 mkdir -p src/styles
 
 GLOBAL_CSS="src/styles/global.css"
 echo "→ Restoring ${GLOBAL_CSS}..."
 
-# Detect package location for global.css
+# Check if a brand is active
+ACTIVE_BRAND=""
+if [ -f ".brand" ]; then
+  ACTIVE_BRAND="$(cat .brand | tr -d '[:space:]')"
+fi
+
 PACKAGE_CSS=""
-if [ -f "node_modules/@schandlergarcia/sf-web-components/src/styles/global.css" ]; then
-  PACKAGE_CSS="node_modules/@schandlergarcia/sf-web-components/src/styles/global.css"
-elif [ -f "$SCRIPT_DIR/../src/styles/global.css" ]; then
-  PACKAGE_CSS="$SCRIPT_DIR/../src/styles/global.css"
+if [ -n "$ACTIVE_BRAND" ]; then
+  # Use the brand's global.css
+  if [ -f "node_modules/@schandlergarcia/sf-web-components/brands/$ACTIVE_BRAND/global.css" ]; then
+    PACKAGE_CSS="node_modules/@schandlergarcia/sf-web-components/brands/$ACTIVE_BRAND/global.css"
+  elif [ -f "$SCRIPT_DIR/../brands/$ACTIVE_BRAND/global.css" ]; then
+    PACKAGE_CSS="$SCRIPT_DIR/../brands/$ACTIVE_BRAND/global.css"
+  fi
+fi
+
+# Fall back to neutral if no brand or brand CSS not found
+if [ -z "$PACKAGE_CSS" ]; then
+  if [ -f "node_modules/@schandlergarcia/sf-web-components/src/styles/global.css" ]; then
+    PACKAGE_CSS="node_modules/@schandlergarcia/sf-web-components/src/styles/global.css"
+  elif [ -f "$SCRIPT_DIR/../src/styles/global.css" ]; then
+    PACKAGE_CSS="$SCRIPT_DIR/../src/styles/global.css"
+  fi
 fi
 
 if [ -n "$PACKAGE_CSS" ] && [ -f "$PACKAGE_CSS" ]; then
   cp "$PACKAGE_CSS" "$GLOBAL_CSS"
-  echo "  ✓ Theme restored from package"
+  if [ -n "$ACTIVE_BRAND" ]; then
+    echo "  ✓ Theme restored (brand: $ACTIVE_BRAND)"
+  else
+    echo "  ✓ Theme restored (neutral)"
+  fi
 else
   echo "  ⚠ Skipped global.css (package CSS not found)"
 fi