@schandlergarcia/sf-web-components 2.3.17 → 2.5.0

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

@@ -1,541 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
-import { createPortal } from "react-dom";
-import { SparklesIcon } from "@heroicons/react/24/solid";
-import {
-  PaperAirplaneIcon,
-  ChevronDownIcon,
-  ArrowPathIcon,
-} from "@heroicons/react/24/outline";
-
-interface Message {
-  id: string;
-  role: "user" | "agent";
-  text: string;
-  timestamp: string;
-  agentName?: string;
-}
-
-interface ScriptStep {
-  role: "user" | "agent";
-  text: string;
-}
-
-type AgentId = "service" | "vee";
-
-interface AgentConfig {
-  name: string;
-  subtitle: string;
-  script: ScriptStep[];
-  standaloneGreeting?: string;
-}
-
-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",
-      },
-    ],
-  },
-  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;
-  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 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-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-[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-[13px] 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-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>
-        </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 [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]);
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => inputRef.current?.focus(), 300);
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (isOpen && !hasStartedRef.current && scriptIndex === 0) {
-      hasStartedRef.current = true;
-      playNextStep();
-    }
-  }, [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;
-
-    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));
-      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);
-
-    const nextIndex = scriptIndex + 1;
-    if (step.role === "user" && nextIndex < script.length && script[nextIndex].role === "agent") {
-      await delay(400);
-
-      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);
-      }
-    }
-  }, [scriptIndex, isAnimating, script, messages, doHandoff]);
-
-  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, script]);
-
-  function handleSend() {
-    const text = inputValue.trim();
-    if (!text) return;
-    setInputValue("");
-
-    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 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-[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)",
-            }}
-          >
-            {/* 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">
-                    {agent.name}
-                  </h3>
-                  <p className="text-xs text-white/60">{agent.subtitle}</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)]">
-                    Connecting...
-                  </p>
-                </div>
-              )}
-              {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>
-
-            {/* 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));
-}