@schandlergarcia/sf-web-components 2.3.12 → 2.3.13

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.3.13] - 2026-04-14
+
+### Changed
+- **Rewrote AgentPanel demo script to Partner Upsell story** — Replaced the penalties placeholder conversation with the full 3-prompt demo flow: (1) User asks about a canceled block booking at Summit Austin Convention Center, Eva surfaces cancellation details (TechCorp, 40 rooms, $24k lost revenue); (2) User asks what can be done, Eva pivots to SDR mode and presents a rich Engine Network Promotion offer card with $159/night rate, 8% commission, projected 70% fill / $12,287 net; (3) User accepts, Eva launches the promo and confirms with a PROMO-SUM-0519 confirmation. Increased typing delay cap to 5.5s for longer card-style messages.
+
 ## [2.3.12] - 2026-04-13
 
 ### Changed

package/brands/engine/app/components/AgentPanel.tsx

@@ -0,0 +1,402 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { SparklesIcon } from "@heroicons/react/24/solid";
+import {
+  PaperAirplaneIcon,
+  ChevronDownIcon,
+} from "@heroicons/react/24/outline";
+
+interface Message {
+  id: string;
+  role: "user" | "agent";
+  text: string;
+  timestamp: string;
+}
+
+interface ScriptStep {
+  role: "user" | "agent";
+  text: string;
+}
+
+const SCRIPT: ScriptStep[] = [
+  // --- Auto-play greeting ---
+  {
+    role: "agent",
+    text: "Hi Jamie! 👋 I'm Eva, your Engine partner assistant. How can I help you today?",
+  },
+
+  // --- Prompt 1: Ask about the canceled booking ---
+  {
+    role: "user",
+    text: "I just got an alert that a block booking was canceled at our Austin Convention Center for next week. What happened?",
+  },
+  {
+    role: "agent",
+    text: "Let me pull up that reservation for you...",
+  },
+  {
+    role: "agent",
+    text: "🔴 CANCELED BOOKING\n\n🏨 Summit Austin Convention Center\n🏢 Client: TechCorp Inc.\n\n📋 Details:\n• Original block: 40 rooms\n• Dates: May 19 – 21 (3 nights)\n• Room rate: $200/night\n• Lost revenue: $24,000\n\n📅 Canceled: Apr 11, 2026\n⚠️ Status: Within penalty window",
+  },
+  {
+    role: "agent",
+    text: "TechCorp canceled their 40-room block for May 19–21. The reason given was that their annual conference is moving to a virtual format this year. This was within the attrition penalty window, so a penalty may apply — but that still leaves 40 rooms open for next week.",
+  },
+
+  // --- Prompt 2: What can be done ---
+  {
+    role: "user",
+    text: "That's a lot of empty rooms. Is there anything we can do to fill them on short notice?",
+  },
+  {
+    role: "agent",
+    text: "Actually, yes — I have an idea. Let me put together an option for you.",
+  },
+  {
+    role: "agent",
+    text: "⚡ ENGINE NETWORK PROMOTION\nFill your open rooms through Engine's network\n\n━━━━━━━━━━━━━━━━━━━━━━━━━\nSummit Austin Convention Center\n40 rooms · May 19–21 · 3 nights\n━━━━━━━━━━━━━━━━━━━━━━━━━\n\n💰 YOUR RATE\n$159/night (20% off rack rate)\n\n📡 ENGINE PROMOTES TO\n2,400+ corporate travel managers\n\n📉 COMMISSION\n12% standard → 8% promotional\nYou save $1,526 vs. standard bookings\n\n━━━━━━━━━━━━━━━━━━━━━━━━━\n📈 PROJECTED OUTCOME\n• Est. fill: 28 rooms (70%)\n• Revenue: $13,356\n• Net after commission: $12,287\n━━━━━━━━━━━━━━━━━━━━━━━━━",
+  },
+  {
+    role: "agent",
+    text: "Here's the play: we run a targeted promotion across Engine's corporate travel network — 2,400+ travel managers get notified about discounted rates at Summit Austin for May 19–21.\n\nWe'd list the rooms at $159/night, and your commission drops from 12% to 8% for promo bookings. On a projected 70% fill, that's $12,287 net — versus $0 if the rooms sit empty.\n\nWant to launch it?",
+  },
+
+  // --- Prompt 3: Accept the offer ---
+  {
+    role: "user",
+    text: "That makes sense — empty rooms earn nothing. Let's launch it.",
+  },
+  {
+    role: "agent",
+    text: "Launching your promotion now...",
+  },
+  {
+    role: "agent",
+    text: "✅ PROMOTION LIVE\n\n🆔 PROMO-SUM-0519\n🏨 Summit Austin Convention Center\n📅 May 19–21 (3 nights)\n💰 Rate: $159/night\n📉 Commission: 8% (promotional)\n📡 Distribution: Engine corporate travel network\n\nYour promotion is live and going out to 2,400+ travel managers now. I'll send you a fill-rate update in 48 hours.",
+  },
+];
+
+function typingDelay(text: string): number {
+  const base = 900;
+  const perChar = 10;
+  const jitter = Math.random() * 500;
+  return Math.min(base + text.length * perChar + jitter, 5500);
+}
+
+function now() {
+  return new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+
+function TypingIndicator() {
+  return (
+    <div className="flex items-center gap-1 px-4 py-1.5">
+      <div className="flex items-end gap-3">
+        <div className="flex-shrink-0 h-7 w-7 rounded-full bg-[var(--color-dash-dark)] flex items-center justify-center">
+          <SparklesIcon className="h-3.5 w-3.5 text-white" />
+        </div>
+        <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 rounded-2xl rounded-bl-md px-4 py-3">
+          <div className="flex items-center gap-1.5">
+            <span className="h-2 w-2 rounded-full bg-[var(--color-dash-label)] animate-bounce" style={{ animationDelay: "0ms" }} />
+            <span className="h-2 w-2 rounded-full bg-[var(--color-dash-label)] animate-bounce" style={{ animationDelay: "150ms" }} />
+            <span className="h-2 w-2 rounded-full bg-[var(--color-dash-label)] animate-bounce" style={{ animationDelay: "300ms" }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AgentMessage({ text, timestamp }: { text: string; timestamp: string }) {
+  return (
+    <div className="px-4 py-1.5">
+      <div className="flex items-end gap-3">
+        <div className="flex-shrink-0 h-7 w-7 rounded-full bg-[var(--color-dash-dark)] flex items-center justify-center">
+          <SparklesIcon className="h-3.5 w-3.5 text-white" />
+        </div>
+        <div className="max-w-[80%]">
+          <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 rounded-2xl rounded-bl-md px-4 py-3 border border-[var(--color-dash-border)]/30 dark:border-[var(--color-dash-muted)]/30">
+            <p className="text-sm text-[var(--color-dash-text)] dark:text-white leading-relaxed whitespace-pre-wrap">
+              {text}
+            </p>
+          </div>
+          <p className="text-[10px] text-[var(--color-dash-label)] mt-1 ml-1">{timestamp}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function UserMessage({ text, timestamp }: { text: string; timestamp: string }) {
+  return (
+    <div className="px-4 py-1.5">
+      <div className="flex items-end justify-end gap-3">
+        <div className="max-w-[80%]">
+          <div className="bg-[var(--color-dash-accent)] rounded-2xl rounded-br-md px-4 py-3">
+            <p className="text-sm text-white leading-relaxed">{text}</p>
+          </div>
+          <p className="text-[10px] text-[var(--color-dash-label)] mt-1 text-right mr-1">{timestamp}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function AgentPanel() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isTyping, setIsTyping] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [scriptIndex, setScriptIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const hasStartedRef = useRef(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isTyping]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => inputRef.current?.focus(), 300);
+    }
+  }, [isOpen]);
+
+  // Auto-play the first agent message when panel opens
+  useEffect(() => {
+    if (isOpen && !hasStartedRef.current && scriptIndex === 0) {
+      hasStartedRef.current = true;
+      playNextStep();
+    }
+  }, [isOpen]);
+
+  const playNextStep = useCallback(async () => {
+    if (scriptIndex >= SCRIPT.length || isAnimating) return;
+
+    const step = SCRIPT[scriptIndex];
+    setIsAnimating(true);
+
+    if (step.role === "agent") {
+      setIsTyping(true);
+      await delay(typingDelay(step.text));
+      setIsTyping(false);
+    }
+
+    const msg: Message = {
+      id: `msg-${Date.now()}`,
+      role: step.role,
+      text: step.text,
+      timestamp: now(),
+    };
+    setMessages((prev) => [...prev, msg]);
+    setScriptIndex((prev) => prev + 1);
+    setIsAnimating(false);
+
+    // If we just played a user message, auto-play all following agent messages
+    const nextIndex = scriptIndex + 1;
+    if (step.role === "user" && nextIndex < SCRIPT.length && SCRIPT[nextIndex].role === "agent") {
+      await delay(400);
+      await playAgentChain(nextIndex);
+    }
+  }, [scriptIndex, isAnimating]);
+
+  async function playAgentChain(startIndex: number) {
+    let idx = startIndex;
+    setIsAnimating(true);
+    while (idx < SCRIPT.length && SCRIPT[idx].role === "agent") {
+      const step = SCRIPT[idx];
+      setIsTyping(true);
+      await delay(typingDelay(step.text));
+      setIsTyping(false);
+
+      const msg: Message = {
+        id: `msg-${Date.now()}-${idx}`,
+        role: "agent",
+        text: step.text,
+        timestamp: now(),
+      };
+      setMessages((prev) => [...prev, msg]);
+      setScriptIndex(idx + 1);
+      idx++;
+      if (idx < SCRIPT.length && SCRIPT[idx].role === "agent") {
+        await delay(500);
+      }
+    }
+    setIsAnimating(false);
+  }
+
+  // Right arrow key stages the next user message into the input
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "ArrowRight" && isOpen && !isAnimating && scriptIndex < SCRIPT.length) {
+        e.preventDefault();
+        const next = SCRIPT[scriptIndex];
+        if (next.role === "user") {
+          setInputValue(next.text);
+          inputRef.current?.focus();
+        }
+      }
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [isOpen, scriptIndex, isAnimating]);
+
+  function handleSend() {
+    const text = inputValue.trim();
+    if (!text) return;
+    setInputValue("");
+
+    // Check if this matches the next scripted user message
+    if (scriptIndex < SCRIPT.length && SCRIPT[scriptIndex].role === "user" && text === SCRIPT[scriptIndex].text) {
+      playNextStep();
+      return;
+    }
+
+    const userMsg: Message = {
+      id: `u-${Date.now()}`,
+      role: "user",
+      text,
+      timestamp: now(),
+    };
+    setMessages((prev) => [...prev, userMsg]);
+
+    setIsTyping(true);
+    setTimeout(() => {
+      setIsTyping(false);
+      const agentMsg: Message = {
+        id: `a-${Date.now()}`,
+        role: "agent",
+        text: "I'm looking into that for you — one moment please.",
+        timestamp: now(),
+      };
+      setMessages((prev) => [...prev, agentMsg]);
+    }, 1500);
+  }
+
+  const scriptDone = scriptIndex >= SCRIPT.length;
+
+  const panel = isOpen
+    ? createPortal(
+        <>
+          <div
+            className="fixed inset-0 z-[9998] bg-black/20 backdrop-blur-sm lg:hidden"
+            onClick={() => setIsOpen(false)}
+          />
+          <div
+            className="fixed z-[9999] bottom-6 right-6 w-[380px] h-[520px] flex flex-col rounded-2xl shadow-2xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 overflow-hidden"
+            style={{
+              animation: "agent-panel-in 0.25s cubic-bezier(0.16, 1, 0.3, 1)",
+            }}
+          >
+            {/* Header */}
+            <div className="bg-[var(--color-dash-dark)] px-5 py-4 flex items-center justify-between flex-shrink-0">
+              <div className="flex items-center gap-3">
+                <div className="h-8 w-8 rounded-full bg-white/10 flex items-center justify-center">
+                  <SparklesIcon className="h-4 w-4 text-white" />
+                </div>
+                <div>
+                  <h3 className="text-sm font-semibold text-white">
+                    Engine Virtual Agent
+                  </h3>
+                  <p className="text-xs text-white/60">Eva · Online</p>
+                </div>
+              </div>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="rounded-lg p-1.5 text-white/60 hover:text-white hover:bg-white/10 transition-colors"
+              >
+                <ChevronDownIcon className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto bg-white dark:bg-[var(--color-dash-text)] py-4">
+              {messages.length === 0 && !isTyping && (
+                <div className="flex flex-col items-center justify-center h-full gap-3 px-6 text-center">
+                  <div className="h-12 w-12 rounded-full bg-[var(--color-dash-accent)]/10 flex items-center justify-center">
+                    <SparklesIcon className="h-6 w-6 text-[var(--color-dash-accent)]" />
+                  </div>
+                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
+                    Eva is connecting...
+                  </p>
+                </div>
+              )}
+              {messages.map((msg) =>
+                msg.role === "agent" ? (
+                  <AgentMessage key={msg.id} text={msg.text} timestamp={msg.timestamp} />
+                ) : (
+                  <UserMessage key={msg.id} text={msg.text} timestamp={msg.timestamp} />
+                )
+              )}
+              {isTyping && <TypingIndicator />}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input */}
+            <div className="flex-shrink-0 bg-white dark:bg-[var(--color-dash-text)] border-t border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 px-4 py-3">
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  handleSend();
+                }}
+                className="flex items-center gap-2"
+              >
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  placeholder="Type your message..."
+                  className="flex-1 bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl px-4 py-2.5 text-sm text-[var(--color-dash-text)] dark:text-white placeholder:text-[var(--color-dash-label)] focus:outline-none focus:ring-2 focus:ring-[var(--color-dash-accent)]/30 focus:border-[var(--color-dash-accent)] transition-all"
+                />
+                <button
+                  type="submit"
+                  disabled={!inputValue.trim()}
+                  className="flex-shrink-0 h-10 w-10 rounded-xl bg-[var(--color-dash-accent)] hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center transition-all"
+                >
+                  <PaperAirplaneIcon className="h-4 w-4 text-white" />
+                </button>
+              </form>
+              <p className="text-[10px] text-[var(--color-dash-label)] text-center mt-2">
+                Powered by Agentforce
+              </p>
+            </div>
+          </div>
+        </>,
+        document.body
+      )
+    : null;
+
+  return (
+    <>
+      {panel}
+
+      {!isOpen && (
+        <button
+          onClick={() => setIsOpen(true)}
+          className="fixed z-[9999] bottom-6 right-6 h-14 w-14 rounded-full bg-[var(--color-dash-dark)] hover:scale-110 shadow-xl hover:shadow-2xl flex items-center justify-center transition-all duration-200"
+          style={{
+            animation: "agent-bubble-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
+          }}
+        >
+          <SparklesIcon className="h-6 w-6 text-white" />
+        </button>
+      )}
+
+      <style>{`
+        @keyframes agent-panel-in {
+          from { opacity: 0; transform: translateY(20px) scale(0.95); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        @keyframes agent-bubble-in {
+          from { opacity: 0; transform: scale(0.5); }
+          to { opacity: 1; transform: scale(1); }
+        }
+      `}</style>
+    </>
+  );
+}
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "2.3.12",
+  "version": "2.3.13",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",