@tribe-nest/forge 3.69.0 → 3.74.0

package/src/ui/styled/AiAgentWidget.tsx

@@ -1,11 +1,12 @@
-import { lazy, Suspense, useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { Fragment, lazy, Suspense, useCallback, useEffect, useId, 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 { useAiAgent, type AiAgentEvent } from "../headless/agent/useAiAgent";
 import { useAgentCall, type AgentCallErrorKind } from "../headless/agent/useAgentCall";
 import type { AgentCallRoomStatus } from "../headless/agent/useAgentCallRoom";
+import { textWithoutChoice, type AgentChoiceEvent } from "../../data/queries/useWebsiteAgent";
 import { Markdown } from "./Markdown";
 
 // The live call pulls in the media SDK and mediasoup, which no visitor needs
@@ -33,8 +34,19 @@ export interface AiAgentWidgetProps {
   title?: string;
   /** Stacking order for the floating elements. Default 9999. */
   zIndex?: number;
+  /** Open the chat panel on mount (the embed loader hands over an open chat). */
+  defaultOpen?: boolean;
+  /**
+   * What happened in the chat, for analytics: opened, closed, started, a
+   * message sent, a reply, links in a reply, an error. Carries no text and no
+   * personal data. The embed loader turns these into DOM events.
+   */
+  onEvent?: (event: AiAgentWidgetEvent) => void;
 }
 
+/** `AiAgentEvent`s plus the panel opening and closing. */
+export type AiAgentWidgetEvent = AiAgentEvent | { type: "chat_opened" } | { type: "chat_closed" };
+
 /**
  * Drop-in website AI agent. A self-contained floating chat widget: fetches its
  * own config for the site's profile, renders a fixed-position bubble + panel,
@@ -48,18 +60,44 @@ export interface AiAgentWidgetProps {
  * 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) {
+export function AiAgentWidget({
+  position = "bottom-right",
+  accentColor,
+  title,
+  zIndex = 9999,
+  defaultOpen = false,
+  onEvent,
+}: AiAgentWidgetProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
-  const { isEnabled, canCall, config, messages, sending, error, send, visitorId } = useAiAgent();
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+  const emit = useCallback((event: AiAgentWidgetEvent) => onEventRef.current?.(event), []);
+  const { isEnabled, canCall, config, messages, restoring, sending, error, send, choose, visitorId } = useAiAgent({
+    onEvent: emit,
+  });
   const call = useAgentCall({ visitorId });
-  const [view, setView] = useState<"chat" | "call" | null>(null);
+  const [view, setView] = useState<"chat" | "call" | null>(defaultOpen ? "chat" : 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 panelId = useId();
+  const launcherRef = useRef<HTMLButtonElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const setOpen = (next: boolean | ((o: boolean) => boolean)) => {
+    const value = typeof next === "function" ? next(open) : next;
+    if (value === open) return;
+    setView(value ? "chat" : null);
+    emit({ type: value ? "chat_opened" : "chat_closed" });
+    // Closing hands focus back to the button that opened it.
+    if (!value) launcherRef.current?.focus();
+  };
+  // An open panel takes the focus, so a keyboard user can type at once.
+  useEffect(() => {
+    if (open) inputRef.current?.focus();
+  }, [open]);
+  // A chat handed over open (the embed) counts as opened.
+  useEffect(() => {
+    if (defaultOpen) emit({ type: "chat_opened" });
+  }, [defaultOpen, emit]);
   const [roomStatus, setRoomStatus] = useState<AgentCallRoomStatus>("connecting");
   const [input, setInput] = useState("");
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -95,9 +133,10 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
   if (!isEnabled) return null;
 
   const agentName = config?.displayName || heading;
+  const lastChoiceIndex = messages.reduce((acc, m, i) => (m.choice ? i : acc), -1);
 
   const submit = () => {
-    if (!input.trim()) return;
+    if (!input.trim() || sending) return;
     send(input);
     setInput("");
   };
@@ -118,6 +157,15 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
     >
       {open && (
         <div
+          id={panelId}
+          role="dialog"
+          aria-label={heading}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              setOpen(false);
+            }
+          }}
           style={{
             width: "min(380px, calc(100vw - 40px))",
             height: "min(560px, calc(100vh - 120px))",
@@ -140,42 +188,67 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
           </div>
 
           <div ref={scrollRef} style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
-            {messages.length === 0 && (
+            {messages.length === 0 && !restoring && (
               <div style={{ opacity: 0.7, fontSize: 14 }}>
                 {config?.greeting || t("forge.ai_agent_widget.default_greeting")}
               </div>
             )}
-            {messages.map((m, i) => (
-              <div
-                key={i}
-                style={{
-                  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
-                  maxWidth: "85%",
-                  padding: "8px 12px",
-                  borderRadius: 14,
-                  fontSize: 14,
-                  whiteSpace: m.role === "user" ? "pre-wrap" : "normal",
-                  background: m.role === "user" ? accent : `${theme.colors.text}12`,
-                  color: m.role === "user" ? onAccent : theme.colors.text,
-                }}
-              >
-                {m.role === "assistant" && m.text ? (
-                  <Markdown>{m.text}</Markdown>
-                ) : (
-                  m.text || (sending && i === messages.length - 1 ? "…" : "")
-                )}
-              </div>
-            ))}
+            {messages.map((m, i) => {
+              // The choice's plain text was streamed into the words too; the
+              // buttons show it, so it is not repeated. A choice with no words
+              // of its own shows its question.
+              const text = textWithoutChoice(m.text, m.choice) || (m.choice ? m.choice.question : "");
+              return (
+                <Fragment key={i}>
+                  {(text || !m.choice) && (
+                    <div
+                      style={{
+                        alignSelf: m.role === "user" ? "flex-end" : "flex-start",
+                        maxWidth: "85%",
+                        padding: "8px 12px",
+                        borderRadius: 14,
+                        fontSize: 14,
+                        whiteSpace: m.role === "user" ? "pre-wrap" : "normal",
+                        background: m.role === "user" ? accent : `${theme.colors.text}12`,
+                        color: m.role === "user" ? onAccent : theme.colors.text,
+                      }}
+                    >
+                      {m.role === "assistant" && text ? (
+                        <Markdown>{text}</Markdown>
+                      ) : (
+                        text || (sending && i === messages.length - 1 ? "…" : "")
+                      )}
+                    </div>
+                  )}
+                  {m.choice && (
+                    <ChoiceOptions
+                      choice={m.choice}
+                      picked={m.picked}
+                      // Only the newest choice can be answered, and only once; a restored one the chat moved past is closed.
+                      disabled={sending || m.closed || m.picked !== undefined || i !== lastChoiceIndex}
+                      accent={accent}
+                      onAccent={onAccent}
+                      onPick={(value) => void choose(m.choice!.stepId, value)}
+                    />
+                  )}
+                </Fragment>
+              );
+            })}
             {error && <div style={{ color: "#c0392b", fontSize: 13 }}>{error}</div>}
           </div>
 
           <div style={{ display: "flex", gap: 8, padding: 12, borderTop: `1px solid ${theme.colors.text}1a` }}>
             <input
+              ref={inputRef}
+              aria-label={t("forge.ai_agent_widget.aria_message")}
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && submit()}
               placeholder={t("forge.ai_agent_widget.input_placeholder")}
-              disabled={sending}
+              // Not disabled while a reply streams: a disabled input drops the
+              // focus to the page, and with it Escape and the next message.
+              // `submit` waits for the reply instead.
+              aria-busy={sending}
               style={{
                 flex: 1,
                 padding: "8px 12px",
@@ -249,8 +322,13 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
           </button>
         )}
         <button
+          ref={launcherRef}
           onClick={() => setOpen((o) => !o)}
           aria-label={t("forge.ai_agent_widget.aria_open")}
+          aria-expanded={open}
+          aria-controls={open ? panelId : undefined}
+          aria-haspopup="dialog"
+          data-testid="forge-agent-launcher"
           style={{
             width: 56,
             height: 56,
@@ -422,3 +500,93 @@ function CallStatus({ text, color, alert }: { text: string; color?: string; aler
     </div>
   );
 }
+
+/**
+ * A playbook choice as tappable buttons, or as cards when the options carry a
+ * length, a price, a picture or a description (live items such as services).
+ * A tap answers the choice; the picked option stays marked and the rest dim.
+ */
+function ChoiceOptions({
+  choice,
+  picked,
+  disabled,
+  accent,
+  onAccent,
+  onPick,
+}: {
+  choice: AgentChoiceEvent;
+  picked?: string;
+  disabled: boolean;
+  accent: string;
+  onAccent: string;
+  onPick: (value: string) => void;
+}) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const asCards = choice.options.some((o) => o.priceText || o.durationText || o.imageUrl || o.description);
+
+  return (
+    <div
+      role="group"
+      aria-label={choice.question || t("forge.ai_agent_widget.choice_label")}
+      data-testid="forge-agent-choice"
+      style={{
+        alignSelf: "flex-start",
+        maxWidth: "92%",
+        display: "flex",
+        flexDirection: asCards ? "column" : "row",
+        flexWrap: asCards ? "nowrap" : "wrap",
+        gap: 6,
+      }}
+    >
+      {choice.options.map((o) => {
+        const isPicked = picked === o.value;
+        const base: CSSProperties = {
+          textAlign: "left",
+          fontSize: 14,
+          fontFamily: "inherit",
+          cursor: disabled ? "default" : "pointer",
+          borderRadius: theme.cornerRadius,
+          border: `1px solid ${isPicked ? accent : `${theme.colors.text}33`}`,
+          background: isPicked ? accent : theme.colors.background,
+          color: isPicked ? onAccent : theme.colors.text,
+          opacity: disabled && !isPicked ? 0.55 : 1,
+          transition: "border-color 120ms ease, opacity 120ms ease",
+        };
+        const details = [o.durationText, o.priceText].filter(Boolean).join(" · ");
+        return (
+          <button
+            key={o.value}
+            type="button"
+            disabled={disabled}
+            aria-pressed={isPicked}
+            onClick={() => onPick(o.value)}
+            data-testid="forge-agent-choice-option"
+            style={asCards ? { ...base, display: "flex", gap: 10, alignItems: "center", padding: 8 } : { ...base, padding: "6px 14px" }}
+          >
+            {asCards && o.imageUrl && (
+              <img
+                src={o.imageUrl}
+                alt=""
+                style={{ width: 48, height: 48, objectFit: "cover", borderRadius: Math.min(8, theme.cornerRadius), flexShrink: 0 }}
+              />
+            )}
+            {asCards ? (
+              <span style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+                <span style={{ fontWeight: 600 }}>{o.label}</span>
+                {details && <span style={{ fontSize: 12, opacity: 0.75 }}>{details}</span>}
+                {o.description && (
+                  <span style={{ fontSize: 12, opacity: 0.75, overflow: "hidden", textOverflow: "ellipsis", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>
+                    {o.description}
+                  </span>
+                )}
+              </span>
+            ) : (
+              o.label
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/ui/styled/Checkout.tsx

@@ -2,8 +2,6 @@ import React, { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { CreditCard, MapPin, Package, User } from "lucide-react";
 import { useCheckout, CHECKOUT_STAGE_ORDER, type CheckoutStage } from "../headless/checkout/useCheckout";
-import type { SelectedShippingRate } from "../headless/checkout/useCheckout";
-import type { ShippingRate, ShippingGroup } from "../../data/queries/useShipping";
 import type { CountryCode } from "libphonenumber-js";
 import { usePhoneInput } from "../headless/forms/usePhoneInput";
 import { PhoneInput } from "./PhoneInput";
@@ -18,6 +16,7 @@ import { Loading } from "./Loading";
 import { CartLineOptions } from "./CartLineOptions";
 import { HoldNotice } from "./HoldNotice";
 import { PaystackPayButton } from "./PaystackPayButton";
+import { ShippingRateSelector } from "./ShippingRateSelector";
 import { useMetaInitiateCheckout } from "../analytics/useMetaEvents";
 
 export interface CheckoutProps {
@@ -1161,114 +1160,3 @@ function PaymentSection({ checkout, onBack }: { checkout: ReturnType<typeof useC
     </div>
   );
 }
-
-// ── Shipping rate selector ──────────────────────────────────────────────────────
-/**
- * Renders the shipping groups: fixed lines for auto-selected flat/external
- * groups, and a radio list for the selectable (dynamic/carrier) group. Selection
- * state is owned by `useCheckout`; this component just renders + calls `onSelect`.
- */
-function ShippingRateSelector({
-  groups,
-  selections,
-  onSelect,
-  formatCurrency,
-}: {
-  groups: ShippingGroup[];
-  selections: Record<string, SelectedShippingRate>;
-  onSelect: (group: ShippingGroup, rate: ShippingRate) => void;
-  formatCurrency: (amount: number, currencyCode?: string) => string;
-}) {
-  const theme = useForgeTheme();
-  const tr = useForgeT();
-  if (groups.length === 0) return null;
-
-  return (
-    <div className="fg:space-y-6">
-      {groups.map((group) => (
-        <div
-          key={group.id}
-          className="fg:p-4 fg:rounded-lg"
-          style={{ border: `1px solid ${theme.colors.primary}${alpha(0.15)}`, borderRadius: `${theme.cornerRadius}px` }}
-        >
-          <p className="fg:font-medium fg:mb-3" style={{ color: theme.colors.text }}>
-            {group.title}
-          </p>
-
-          {!group.selectable && group.rates.length > 0 ? (
-            // Flat / external — a single, auto-selected rate.
-            <div
-              className="fg:flex fg:items-center fg:justify-between fg:p-3 fg:rounded-md"
-              style={{
-                backgroundColor: `${theme.colors.primary}${alpha(0.05)}`,
-                borderRadius: `${theme.cornerRadius}px`,
-              }}
-            >
-              <div>
-                <span className="fg:text-sm fg:font-medium" style={{ color: theme.colors.text }}>
-                  {group.rates[0].carrier} · {group.rates[0].service}
-                </span>
-                {group.rates[0].estimatedDays != null && (
-                  <span className="fg:text-xs fg:ml-2" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
-                    {tr("forge.checkout.rate_days", { days: group.rates[0].estimatedDays })}
-                  </span>
-                )}
-              </div>
-              <span className="fg:text-sm fg:font-semibold" style={{ color: theme.colors.primary }}>
-                {formatCurrency(group.rates[0].amount, group.rates[0].currency)}
-              </span>
-            </div>
-          ) : (
-            // Dynamic — buyer picks a carrier option.
-            <div className="fg:space-y-2">
-              {group.rates.length === 0 && (
-                <p className="fg:text-sm" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
-                  {tr("forge.checkout.no_shipping_options")}
-                </p>
-              )}
-              {group.rates.map((rate) => {
-                const isSelected = selections[group.id]?.rateId === rate.rateId;
-                return (
-                  <label
-                    key={rate.rateId}
-                    className="fg:flex fg:items-center fg:justify-between fg:p-3 fg:rounded-md fg:cursor-pointer fg:transition-colors"
-                    style={{
-                      backgroundColor: isSelected ? `${theme.colors.primary}${alpha(0.1)}` : "transparent",
-                      border: `1px solid ${isSelected ? theme.colors.primary : `${theme.colors.primary}${alpha(0.2)}`}`,
-                      borderRadius: `${theme.cornerRadius}px`,
-                    }}
-                  >
-                    <div className="fg:flex fg:items-center fg:gap-3">
-                      <input
-                        type="radio"
-                        name={`shipping-rate-${group.id}`}
-                        checked={isSelected}
-                        onChange={() => onSelect(group, rate)}
-                        style={{ accentColor: theme.colors.primary }}
-                      />
-                      <div>
-                        <span className="fg:text-sm fg:font-medium" style={{ color: theme.colors.text }}>
-                          {rate.carrier} - {rate.service}
-                        </span>
-                        {rate.estimatedDays && (
-                          <p className="fg:text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
-                            {rate.estimatedDays === 1
-                              ? tr("forge.checkout.rate_estimated_day", { days: rate.estimatedDays })
-                              : tr("forge.checkout.rate_estimated_days", { days: rate.estimatedDays })}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                    <span className="fg:text-sm fg:font-semibold" style={{ color: theme.colors.primary }}>
-                      {formatCurrency(rate.amount, rate.currency)}
-                    </span>
-                  </label>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}