@tribe-nest/forge 3.65.0 → 3.67.0

package/src/ui/styled/AiAgentWidget.tsx

@@ -1,10 +1,29 @@
-import { useEffect, useRef, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { Phone, PhoneOff } from "lucide-react";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAiAgent } from "../headless/agent/useAiAgent";
+import { useAgentCall, type AgentCallErrorKind } from "../headless/agent/useAgentCall";
+import type { AgentCallRoomStatus } from "../headless/agent/useAgentCallRoom";
 import { Markdown } from "./Markdown";
 
+// The live call pulls in the media SDK and mediasoup, which no visitor needs
+// until they press Call. Split out so it stays out of every page's bundle.
+const loadCallRoom = () => import("./AiAgentCallRoom");
+const AiAgentCallRoom = lazy(loadCallRoom);
+
+/** The widget already draws errors in this red; hang up shares it. */
+const DANGER = "#c0392b";
+
+const CALL_ERROR_KEYS: Record<AgentCallErrorKind, string> = {
+  too_many: "forge.ai_agent_widget.call_error_too_many",
+  unavailable: "forge.ai_agent_widget.call_error_unavailable",
+  busy: "forge.ai_agent_widget.call_error_busy",
+  check_failed: "forge.ai_agent_widget.call_error_check_failed",
+  failed: "forge.ai_agent_widget.call_error_failed",
+};
+
 export interface AiAgentWidgetProps {
   /** Corner to anchor the floating bubble. Default "bottom-right". */
   position?: "bottom-right" | "bottom-left";
@@ -24,12 +43,24 @@ export interface AiAgentWidgetProps {
  * the profile, or when the visitor is on a page the artist excluded.
  * Appearance-only props let authors restyle it without touching behavior. For
  * custom UI, use the `useAiAgent()` hook instead.
+ *
+ * When the agent takes calls, a phone button sits beside the bubble ("Call
+ * us"): a voice call with the same agent, in the browser. `useAgentCall()` is
+ * its headless half.
  */
 export function AiAgentWidget({ position = "bottom-right", accentColor, title, zIndex = 9999 }: AiAgentWidgetProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
-  const { isEnabled, config, messages, sending, error, send } = useAiAgent();
-  const [open, setOpen] = useState(false);
+  const { isEnabled, canCall, config, messages, sending, error, send, visitorId } = useAiAgent();
+  const call = useAgentCall({ visitorId });
+  const [view, setView] = useState<"chat" | "call" | null>(null);
+  const open = view === "chat";
+  const setOpen = (next: boolean | ((o: boolean) => boolean)) =>
+    setView((current) => {
+      const value = typeof next === "function" ? next(current === "chat") : next;
+      return value ? "chat" : null;
+    });
+  const [roomStatus, setRoomStatus] = useState<AgentCallRoomStatus>("connecting");
   const [input, setInput] = useState("");
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -42,8 +73,29 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
   }, [messages, sending]);
 
+  const callPhase = call.state.phase;
+  const callActive = callPhase === "connecting" || callPhase === "live";
+
+  // On a page where the widget hides (an excluded path) the call panel goes
+  // with it, and the call would run on with no way to hang up. Hang up instead.
+  const { end: endCall } = call;
+  useEffect(() => {
+    if (!isEnabled || !canCall) endCall();
+  }, [isEnabled, canCall, endCall]);
+
+  const startCall = () => {
+    void loadCallRoom();
+    setView("call");
+    if (callActive) return;
+    setRoomStatus("connecting");
+    void call.start();
+  };
+  const onRoomStatus = useCallback((status: AgentCallRoomStatus) => setRoomStatus(status), []);
+
   if (!isEnabled) return null;
 
+  const agentName = config?.displayName || heading;
+
   const submit = () => {
     if (!input.trim()) return;
     send(input);
@@ -146,24 +198,227 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
         </div>
       )}
 
-      <button
-        onClick={() => setOpen((o) => !o)}
-        aria-label={t("forge.ai_agent_widget.aria_open")}
-        style={{
-          width: 56,
-          height: 56,
-          borderRadius: "50%",
-          background: accent,
-          color: onAccent,
-          border: "none",
-          cursor: "pointer",
-          boxShadow: "0 6px 20px rgba(0,0,0,0.25)",
-          fontSize: 24,
-          float: position === "bottom-left" ? "left" : "right",
-        }}
-      >
-        {open ? "×" : "💬"}
-      </button>
+      {/* Kept mounted, only hidden, while a call is on: unmounting it would
+          leave the media room with the call still running. */}
+      {(view === "call" || callActive) && (
+        <CallPanel
+          hidden={view !== "call"}
+          heading={heading}
+          agentName={agentName}
+          accent={accent}
+          onAccent={onAccent}
+          callState={call.state}
+          roomStatus={roomStatus}
+          onRoomStatus={onRoomStatus}
+          getCredentials={call.getCredentials}
+          onHangUp={call.end}
+          onRetry={startCall}
+          onClose={() => {
+            call.reset();
+            setView(null);
+          }}
+          onChat={() => {
+            call.reset();
+            setView("chat");
+          }}
+        />
+      )}
+
+      <div style={{ display: "flex", gap: 12, alignItems: "center", justifyContent: position === "bottom-left" ? "flex-start" : "flex-end" }}>
+        {canCall && (
+          <button
+            onClick={startCall}
+            aria-label={callActive ? t("forge.ai_agent_widget.aria_show_call") : t("forge.ai_agent_widget.aria_call")}
+            data-testid="forge-agent-call-button"
+            style={{
+              width: 48,
+              height: 48,
+              borderRadius: "50%",
+              background: callActive ? DANGER : theme.colors.background,
+              color: callActive ? readableTextOn(DANGER) : accent,
+              border: `2px solid ${callActive ? DANGER : accent}`,
+              cursor: "pointer",
+              boxShadow: "0 6px 20px rgba(0,0,0,0.18)",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              order: position === "bottom-left" ? 2 : 0,
+            }}
+          >
+            <Phone size={20} aria-hidden />
+          </button>
+        )}
+        <button
+          onClick={() => setOpen((o) => !o)}
+          aria-label={t("forge.ai_agent_widget.aria_open")}
+          style={{
+            width: 56,
+            height: 56,
+            borderRadius: "50%",
+            background: accent,
+            color: onAccent,
+            border: "none",
+            cursor: "pointer",
+            boxShadow: "0 6px 20px rgba(0,0,0,0.25)",
+            fontSize: 24,
+            order: 1,
+          }}
+        >
+          {open ? "×" : "💬"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+interface CallPanelProps {
+  hidden: boolean;
+  heading: string;
+  agentName: string;
+  accent: string;
+  onAccent: string;
+  callState: ReturnType<typeof useAgentCall>["state"];
+  roomStatus: AgentCallRoomStatus;
+  onRoomStatus: (status: AgentCallRoomStatus) => void;
+  getCredentials: () => Promise<{ mediaUrl: string; token: string }>;
+  onHangUp: () => void;
+  onRetry: () => void;
+  onClose: () => void;
+  onChat: () => void;
+}
+
+/** "Call us": the call's own card, in place of the chat panel. */
+function CallPanel({
+  hidden,
+  heading,
+  agentName,
+  accent,
+  onAccent,
+  callState,
+  roomStatus,
+  onRoomStatus,
+  getCredentials,
+  onHangUp,
+  onRetry,
+  onClose,
+  onChat,
+}: CallPanelProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const active = callState.phase === "connecting" || callState.phase === "live";
+  const speaking = callState.phase === "live" && roomStatus === "speaking";
+
+  const secondary: CSSProperties = {
+    background: "transparent",
+    color: theme.colors.text,
+    border: `1px solid ${theme.colors.text}33`,
+    borderRadius: theme.cornerRadius,
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: 14,
+  };
+  const primary: CSSProperties = { ...secondary, background: accent, color: onAccent, border: "none", fontWeight: 600 };
+
+  let body: ReactNode;
+  if (callState.phase === "live") {
+    body = (
+      <Suspense fallback={<CallStatus text={t("forge.ai_agent_widget.call_connecting")} />}>
+        <AiAgentCallRoom
+          getCredentials={getCredentials}
+          selfIdentity={callState.call.identity}
+          agentName={agentName}
+          onEnded={onHangUp}
+          onStatus={onRoomStatus}
+        />
+      </Suspense>
+    );
+  } else if (callState.phase === "ended") {
+    body = <CallStatus text={t("forge.ai_agent_widget.call_ended")} />;
+  } else if (callState.phase === "error") {
+    body = <CallStatus text={t(CALL_ERROR_KEYS[callState.error])} color={DANGER} alert />;
+  } else {
+    body = <CallStatus text={t("forge.ai_agent_widget.call_connecting")} />;
+  }
+
+  return (
+    <div
+      data-testid="forge-agent-call-panel"
+      data-phase={callState.phase}
+      style={{
+        width: "min(380px, calc(100vw - 40px))",
+        marginBottom: 12,
+        display: hidden ? "none" : "flex",
+        flexDirection: "column",
+        background: theme.colors.background,
+        color: theme.colors.text,
+        border: `1px solid ${theme.colors.text}1a`,
+        borderRadius: theme.cornerRadius,
+        overflow: "hidden",
+        boxShadow: "0 12px 40px rgba(0,0,0,0.18)",
+      }}
+    >
+      <div style={{ background: accent, color: onAccent, padding: "12px 16px", fontWeight: 600, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <span>{heading}</span>
+        {!active && (
+          <button onClick={onClose} style={{ background: "transparent", border: "none", color: onAccent, cursor: "pointer", fontSize: 20, lineHeight: 1 }} aria-label={t("forge.ai_agent_widget.aria_close")}>
+            ×
+          </button>
+        )}
+      </div>
+
+      <div style={{ padding: "24px 16px", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
+        <div
+          aria-hidden
+          style={{
+            width: 64,
+            height: 64,
+            borderRadius: "50%",
+            background: accent,
+            color: onAccent,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transform: speaking ? "scale(1.12)" : "scale(1)",
+            boxShadow: speaking ? `0 0 0 8px ${accent}33` : "none",
+            transition: "transform 150ms ease, box-shadow 150ms ease",
+            opacity: active || callState.phase === "ended" ? 1 : 0.6,
+          }}
+        >
+          <Phone size={28} />
+        </div>
+        <div style={{ fontWeight: 600 }}>{agentName}</div>
+        {body}
+      </div>
+
+      <div style={{ display: "flex", gap: 8, padding: 12, justifyContent: "center", borderTop: `1px solid ${theme.colors.text}1a` }}>
+        {active ? (
+          <button
+            onClick={onHangUp}
+            data-testid="forge-agent-call-hangup"
+            style={{ ...primary, background: DANGER, color: readableTextOn(DANGER), display: "inline-flex", alignItems: "center", gap: 8 }}
+          >
+            <PhoneOff size={16} aria-hidden />
+            {t("forge.ai_agent_widget.call_hang_up")}
+          </button>
+        ) : (
+          <>
+            <button onClick={onRetry} style={primary} data-testid="forge-agent-call-again">
+              {callState.phase === "error" ? t("forge.ai_agent_widget.call_try_again") : t("forge.ai_agent_widget.call_again")}
+            </button>
+            <button onClick={onChat} style={secondary}>
+              {t("forge.ai_agent_widget.call_back_to_chat")}
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CallStatus({ text, color, alert }: { text: string; color?: string; alert?: boolean }) {
+  return (
+    <div role={alert ? "alert" : "status"} aria-live="polite" style={{ fontSize: 14, textAlign: "center", color }} data-testid="forge-agent-call-status">
+      {text}
     </div>
   );
 }

package/src/ui/styled/CookieConsent.tsx

@@ -4,6 +4,7 @@ import { useForgeT } from "../../i18n";
 import { useCookieConsent } from "../headless/consent/useCookieConsent";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
+import { useBrandLegalUrls } from "../../data/queries/useWebsite";
 
 export interface CookieConsentProps {
   /** Heading text. Defaults to Forge's own translated heading. */
@@ -17,19 +18,20 @@ export interface CookieConsentProps {
   /** Link to the site's own privacy policy (rendered after the description). */
   privacyPolicyHref?: string;
   /**
-   * Fall back to TribeNest's hosted privacy policy
-   * (https://www.tribenest.co/privacy) when the site doesn't have its own.
+   * Fall back to the brand's hosted privacy policy when the site doesn't have
+   * its own: TribeNest's, or Mandatera's for a law firm, from `site-config`
+   * (https://www.tribenest.co/privacy when the backend sends none).
    * Ignored if `privacyPolicyHref` is set. Opens in a new tab.
    */
   useTribeNestPrivacy?: boolean;
   /**
    * Controlled visibility. Leave undefined for the default behaviour (show once
    * until the visitor decides). Set `true` to force it open again so a visitor
-   * can change their choice — wire a "Cookie settings" link to a boolean state
+   * can change their choice: wire a "Cookie settings" link to a boolean state
    * and pass it here (see the site-starter footer for the pattern).
    */
   open?: boolean;
-  /** Called after the visitor makes a choice or dismisses — use it to reset your
+  /** Called after the visitor makes a choice or dismisses. Use it to reset your
    * controlled `open` state back to false. */
   onClose?: () => void;
   /** Extra class on the outer wrapper. */
@@ -42,8 +44,8 @@ const TRIBENEST_PRIVACY_URL = "https://www.tribenest.co/privacy";
 
 /**
  * Drop-in cookie-consent banner. Shows once until the visitor decides, writes to
- * the shared consent store, and — because `<ForgeAnalytics />` reads the same
- * store — actually gates first-party analytics (performance) and the Meta Pixel
+ * the shared consent store, and (because `<ForgeAnalytics />` reads the same
+ * store) actually gates first-party analytics (performance) and the Meta Pixel
  * (marketing). Themed via Forge tokens. Drop it into the site root:
  * `<CookieConsent privacyPolicyHref="/privacy" />`.
  */
@@ -59,8 +61,10 @@ export function CookieConsent({
 }: CookieConsentProps) {
   const t = useThemeTokens();
   const tr = useForgeT();
-  const privacyHref = privacyPolicyHref ?? (useTribeNestPrivacy ? TRIBENEST_PRIVACY_URL : undefined);
-  // External TribeNest link opens in a new tab; a same-origin custom page stays.
+  const brandLegal = useBrandLegalUrls();
+  const privacyHref =
+    privacyPolicyHref ?? (useTribeNestPrivacy ? (brandLegal?.privacy ?? TRIBENEST_PRIVACY_URL) : undefined);
+  // The brand's hosted policy opens in a new tab; a same-origin custom page stays.
   const privacyExternal = !privacyPolicyHref && useTribeNestPrivacy;
   const { ready, decided, consent, acceptAll, rejectAll, save } = useCookieConsent();
   const [draft, setDraft] = useState<Draft>({
@@ -121,7 +125,7 @@ export function CookieConsent({
           <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, fontFamily: t.headingFontFamily }}>
             {title ?? tr("forge.cookie_consent.title")}
           </h2>
-          {/* Close is only meaningful once a choice exists (reopened panel) —
+          {/* Close is only meaningful once a choice exists (reopened panel);
               on first run the visitor must pick an option. */}
           {decided && (
             <button

package/src/ui/styled/MusicLinkPage.tsx

@@ -9,6 +9,7 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { PageActions } from "./PageActions";
 import { DEFAULT_MUSIC_LINK_STYLE, MusicLinkLayout, type LayoutParts, type MusicLinkStyle } from "./musicLinkStyles";
 import { useCookieConsent } from "../headless/consent/useCookieConsent";
+import { useBrandLegalUrls } from "../../data/queries/useWebsite";
 
 /**
  * How each streaming service is presented.
@@ -57,7 +58,7 @@ const SERVICES: Record<string, { label: string; color: string; action?: string }
  */
 const OVERLAY_Z_INDEX = 60;
 
-/** TribeNest's hosted policy, matching what `CookieConsent` falls back to. */
+/** TribeNest's hosted policy, the last fallback, matching `CookieConsent`. */
 const TRIBENEST_PRIVACY_URL = "https://www.tribenest.co/privacy";
 
 const serviceMeta = (platform: string) => SERVICES[platform] ?? { label: platform, color: "#666666", action: "Open" };
@@ -69,7 +70,8 @@ export interface MusicLinkPageProps {
   initialLink?: IMusicLink | null;
   /** Heading above the service list. */
   listHeading?: string;
-  /** The site's own privacy policy. Falls back to TribeNest's hosted one. */
+  /** The site's own privacy policy. Falls back to the brand's hosted one
+   * (TribeNest's, or Mandatera's for a law firm) from `site-config`. */
   privacyHref?: string;
   /** The "Powered by TribeNest" credit. */
   showPoweredBy?: boolean;
@@ -375,7 +377,8 @@ function SmartLinkFooter({
   showPoweredBy: boolean;
 }) {
   const { reopen } = useCookieConsent();
-  const href = privacyHref ?? TRIBENEST_PRIVACY_URL;
+  const brandLegal = useBrandLegalUrls();
+  const href = privacyHref ?? brandLegal?.privacy ?? TRIBENEST_PRIVACY_URL;
   const external = !privacyHref;
 
   const linkStyle: CSSProperties = {