@schandlergarcia/sf-web-components 2.3.16 → 2.3.17

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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.17] - 2026-04-15
+
+### Changed
+- **Two-agent chat system** — AgentPanel now supports Partner Service Agent (booking recovery, default) and Engine Virtual Agent (case triage with handoff). Agents swap via `npm run agent:partner` / `agent:engine` which edits the source directly for instant HMR.
+- **Structured card renderer for chat** — Messages with headers (OPEN CASES SUMMARY, CANCELED BOOKING, PROMOTION LIVE) render as formatted cards with priority dots, key-value pairs, and color-coded sections instead of plain text.
+- **Improved chat readability** — Replaced CSS variable colors with high-contrast solid colors. Warm parchment backgrounds, dark text, visible borders. Bumped all font sizes +1px.
+- **Cascading skeleton loading** — Tab switch skeletons now fade in with randomized stagger delays per element instead of uniform pulse. Each element has a unique random delay for natural feel.
+- **Streamlined promo flow** — Removed ENGINE NETWORK PROMOTION card; upsell pitch now follows directly after CANCELED BOOKING card in a single conversational message.
+- **Demo state manager** — `demo.sh` now tracks AgentPanel.tsx. Added `demo:d360` npm shortcut to fast-forward to Data 360 tab state.
+- **Data 360 demo state** — Pre-built demo version with Data 360 booking segmentation tab, saveable/restorable via `demo:d360` / `demo:reset`.
+
 ## [2.3.16] - 2026-04-14
 
 ### Changed

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

@@ -4,6 +4,7 @@ import { SparklesIcon } from "@heroicons/react/24/solid";
 import {
   PaperAirplaneIcon,
   ChevronDownIcon,
+  ArrowPathIcon,
 } from "@heroicons/react/24/outline";
 
 interface Message {
@@ -11,6 +12,7 @@ interface Message {
   role: "user" | "agent";
   text: string;
   timestamp: string;
+  agentName?: string;
 }
 
 interface ScriptStep {
@@ -18,63 +20,102 @@ interface ScriptStep {
   text: string;
 }
 
-const SCRIPT: ScriptStep[] = [
-  // --- Auto-play greeting ---
-  {
-    role: "agent",
-    text: "Hi Jamie! 👋 I'm your Partner Hub 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.",
-  },
+type AgentId = "service" | "vee";
 
-  // --- 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?",
-  },
+interface AgentConfig {
+  name: string;
+  subtitle: string;
+  script: ScriptStep[];
+  standaloneGreeting?: string;
+}
 
-  // --- 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...",
+const AGENTS: Record<AgentId, AgentConfig> = {
+  service: {
+    name: "Partner Service Agent",
+    subtitle: "Agentforce - Online",
+    script: [
+      {
+        role: "agent",
+        text: "Hi Jamie! I'm your Partner Service Agent. I can help you triage cases, check property performance, or review billing items. What would you like to look at?",
+      },
+      {
+        role: "user",
+        text: "I have a few open cases. Can you give me a quick summary of what needs attention?",
+      },
+      {
+        role: "agent",
+        text: "Sure. Let me pull your open cases across all properties...",
+      },
+      {
+        role: "agent",
+        text: "OPEN CASES SUMMARY\n\n7 active cases across 4 properties\n\nURGENT (2)\n- CS-1039: Room cleanliness, 3rd occurrence (Chicago Downtown, Escalated)\n- CS-1034: Penalty calculation review (Austin Conv. Ctr, Escalated)\n\nNEEDS REVIEW (2)\n- CS-1040: Missing resale credit ATR-00001 (Austin, At Risk SLA)\n- CS-1037: Commission rate discrepancy (Midtown NYC)\n\nIN PROGRESS (2)\n- CS-1041: HVAC failure, conference room B (SF Bay)\n- CS-1035: Pool heater malfunction (SF Bay)\n\nLOW PRIORITY (1)\n- CS-1038: VIP late checkout request (SF Bay)",
+      },
+      {
+        role: "agent",
+        text: "Your two escalated cases need the most attention. CS-1039 is a repeat cleanliness complaint at Chicago Downtown, now on its 3rd occurrence. CS-1034 is the penalty calculation dispute at Austin. Would you like me to dig into either of those, or is there something else I can help with?",
+      },
+      {
+        role: "user",
+        text: "Actually, I just got a cancellation alert for Austin. Can someone help me figure out what to do about 40 empty rooms?",
+      },
+      {
+        role: "agent",
+        text: "That sounds like it needs our revenue recovery specialist. Let me connect you with Vee, the Engine Virtual Agent. She handles booking cancellations and can set up promotions to fill those rooms. One moment...",
+      },
+      {
+        role: "agent",
+        text: "HANDOFF",
+      },
+    ],
   },
-  {
-    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.",
+  vee: {
+    name: "Vee, Engine Virtual Agent",
+    subtitle: "Agentforce - Online",
+    standaloneGreeting: "Hi Jamie! I'm Vee, your Engine Virtual Agent. I handle bookings, cancellations, and revenue opportunities across your properties. How can I help?",
+    script: [
+      {
+        role: "agent",
+        text: "Hi Jamie, Vee here. I've been briefed on the situation: a 40-room cancellation at Austin Convention Center. Let me pull up the details.",
+      },
+      {
+        role: "agent",
+        text: "CANCELED BOOKING\n\nSummit Austin Convention Center\nClient: TechCorp Inc.\n\nDetails:\n- Original block: 40 rooms\n- Dates: May 19-21 (3 nights)\n- Room rate: $200/night\n- Lost revenue: $24,000\n\nCanceled: Apr 14, 2026\nStatus: 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.",
+      },
+      {
+        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\nYOUR RATE\n$159/night (20% off rack rate)\n\nENGINE PROMOTES TO\n2,400+ corporate travel managers\n\nCOMMISSION\n12% standard > 8% promotional\nYou save $1,526 vs. standard bookings\n\n---\nPROJECTED 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?",
+      },
+      {
+        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\nPROMO-SUM-0519\nSummit Austin Convention Center\nMay 19-21 (3 nights)\nRate: $159/night\nCommission: 8% (promotional)\nDistribution: 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;
@@ -106,16 +147,29 @@ function TypingIndicator() {
   );
 }
 
+function HandoffBanner({ fromAgent, toAgent }: { fromAgent: string; toAgent: string }) {
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-center gap-3 bg-[var(--color-dash-accent)]/5 border border-[var(--color-dash-accent)]/20 rounded-xl px-4 py-3">
+        <ArrowPathIcon className="h-4 w-4 text-[var(--color-dash-accent)] flex-shrink-0" />
+        <p className="text-xs text-[var(--color-dash-text)] dark:text-white">
+          <span className="font-semibold">{fromAgent}</span> transferred you to <span className="font-semibold">{toAgent}</span>
+        </p>
+      </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">
+      <div className="flex items-start gap-3">
+        <div className="flex-shrink-0 h-7 w-7 rounded-full bg-[var(--color-dash-dark)] flex items-center justify-center mt-0.5">
           <SparklesIcon className="h-3.5 w-3.5 text-white" />
         </div>
-        <div className="max-w-[80%]">
+        <div className="max-w-[85%]">
           <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">
+            <p className="text-[13px] text-[var(--color-dash-text)] dark:text-white leading-relaxed whitespace-pre-wrap">
               {text}
             </p>
           </div>
@@ -131,7 +185,7 @@ function UserMessage({ text, timestamp }: { text: string; timestamp: string }) {
     <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">
+          <div className="bg-[var(--color-dash-dark)] 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>
@@ -146,12 +200,35 @@ export default function AgentPanel() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [isTyping, setIsTyping] = useState(false);
   const [inputValue, setInputValue] = useState("");
+  const [startAgent] = useState<AgentId>(() => {
+    const params = new URLSearchParams(window.location.search);
+    const fromUrl = params.get("agent") as AgentId | null;
+    if (fromUrl && fromUrl in AGENTS) return fromUrl;
+    return "service";
+  });
+  const [activeAgent, setActiveAgent] = useState<AgentId>(startAgent);
+  const wasHandoff = useRef(false);
   const [scriptIndex, setScriptIndex] = useState(0);
   const [isAnimating, setIsAnimating] = useState(false);
+  const [handoffs, setHandoffs] = useState<Array<{ afterMessageId: string; from: string; to: string }>>([]);
   const hasStartedRef = useRef(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const agent = AGENTS[activeAgent];
+
+  const script = React.useMemo(() => {
+    const base = agent.script;
+    if (!wasHandoff.current && agent.standaloneGreeting) {
+      return [
+        { role: "agent" as const, text: agent.standaloneGreeting },
+        { role: "user" as const, text: "I just got an alert that a block booking was canceled at our Austin Convention Center for next week. What happened?" },
+        ...base.slice(1),
+      ];
+    }
+    return base;
+  }, [activeAgent, agent]);
+
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, isTyping]);
@@ -162,7 +239,6 @@ export default function AgentPanel() {
     }
   }, [isOpen]);
 
-  // Auto-play the first agent message when panel opens
   useEffect(() => {
     if (isOpen && !hasStartedRef.current && scriptIndex === 0) {
       hasStartedRef.current = true;
@@ -170,12 +246,67 @@ export default function AgentPanel() {
     }
   }, [isOpen]);
 
+  const doHandoff = useCallback(async (lastMsgId: string) => {
+    const fromName = AGENTS[activeAgent].name;
+    const toName = AGENTS.vee.name;
+
+    setHandoffs(prev => [...prev, { afterMessageId: lastMsgId, from: fromName, to: toName }]);
+
+    await delay(800);
+    wasHandoff.current = true;
+    setActiveAgent("vee");
+    setScriptIndex(0);
+
+    await delay(600);
+    await playAgentChainForScript(AGENTS.vee.script, 0);
+  }, [activeAgent]);
+
+  async function playAgentChainForScript(scr: ScriptStep[], startIndex: number) {
+    let idx = startIndex;
+    setIsAnimating(true);
+    while (idx < scr.length && scr[idx].role === "agent") {
+      const step = scr[idx];
+
+      if (step.text === "HANDOFF") {
+        idx++;
+        setScriptIndex(idx);
+        continue;
+      }
+
+      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 < scr.length && scr[idx]?.role === "agent") {
+        await delay(500);
+      }
+    }
+    setIsAnimating(false);
+  }
+
   const playNextStep = useCallback(async () => {
-    if (scriptIndex >= SCRIPT.length || isAnimating) return;
+    if (scriptIndex >= script.length || isAnimating) return;
 
-    const step = SCRIPT[scriptIndex];
+    const step = script[scriptIndex];
     setIsAnimating(true);
 
+    if (step.text === "HANDOFF") {
+      const lastMsg = messages[messages.length - 1];
+      setScriptIndex(scriptIndex + 1);
+      setIsAnimating(false);
+      await doHandoff(lastMsg?.id || "");
+      return;
+    }
+
     if (step.role === "agent") {
       setIsTyping(true);
       await delay(typingDelay(step.text));
@@ -192,45 +323,50 @@ export default function AgentPanel() {
     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") {
+    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);
+      if (script[nextIndex].text === "HANDOFF") {
+        // Play until handoff, then the chain message before it triggers handoff
+        let idx = nextIndex;
+        setIsAnimating(true);
+        while (idx < script.length && script[idx].role === "agent") {
+          const s = script[idx];
+          if (s.text === "HANDOFF") {
+            setScriptIndex(idx + 1);
+            setIsAnimating(false);
+            await doHandoff(messages[messages.length - 1]?.id || msg.id);
+            return;
+          }
+          setIsTyping(true);
+          await delay(typingDelay(s.text));
+          setIsTyping(false);
+          const m: Message = {
+            id: `msg-${Date.now()}-${idx}`,
+            role: "agent",
+            text: s.text,
+            timestamp: now(),
+          };
+          setMessages((prev) => [...prev, m]);
+          setScriptIndex(idx + 1);
+          idx++;
+          if (idx < script.length && script[idx]?.role === "agent") {
+            await delay(500);
+          }
+        }
+        setIsAnimating(false);
+      } else {
+        await playAgentChainForScript(script, nextIndex);
       }
     }
-    setIsAnimating(false);
-  }
+  }, [scriptIndex, isAnimating, script, messages, doHandoff]);
 
-  // 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) {
+      if (e.key === "ArrowRight" && isOpen && !isAnimating && scriptIndex < script.length) {
         e.preventDefault();
-        const next = SCRIPT[scriptIndex];
+        const next = script[scriptIndex];
         if (next.role === "user") {
           setInputValue(next.text);
           inputRef.current?.focus();
@@ -239,15 +375,14 @@ export default function AgentPanel() {
     }
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [isOpen, scriptIndex, isAnimating]);
+  }, [isOpen, scriptIndex, isAnimating, script]);
 
   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) {
+    if (scriptIndex < script.length && script[scriptIndex].role === "user" && text === script[scriptIndex].text) {
       playNextStep();
       return;
     }
@@ -266,15 +401,13 @@ export default function AgentPanel() {
       const agentMsg: Message = {
         id: `a-${Date.now()}`,
         role: "agent",
-        text: "I'm looking into that for you — one moment please.",
+        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(
         <>
@@ -283,7 +416,7 @@ export default function AgentPanel() {
             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"
+            className="fixed z-[9999] bottom-6 right-6 w-[460px] h-[720px] 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)",
             }}
@@ -296,9 +429,9 @@ export default function AgentPanel() {
                 </div>
                 <div>
                   <h3 className="text-sm font-semibold text-white">
-                    Partner Hub Agent
+                    {agent.name}
                   </h3>
-                  <p className="text-xs text-white/60">Agentforce · Online</p>
+                  <p className="text-xs text-white/60">{agent.subtitle}</p>
                 </div>
               </div>
               <button
@@ -317,17 +450,23 @@ export default function AgentPanel() {
                     <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...
+                    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} />
-                )
-              )}
+              {messages.map((msg) => {
+                const handoff = handoffs.find(h => h.afterMessageId === msg.id);
+                return (
+                  <React.Fragment key={msg.id}>
+                    {msg.role === "agent" ? (
+                      <AgentMessage text={msg.text} timestamp={msg.timestamp} />
+                    ) : (
+                      <UserMessage text={msg.text} timestamp={msg.timestamp} />
+                    )}
+                    {handoff && <HandoffBanner fromAgent={handoff.from} toAgent={handoff.to} />}
+                  </React.Fragment>
+                );
+              })}
               {isTyping && <TypingIndicator />}
               <div ref={messagesEndRef} />
             </div>