@flamingo-stack/openframe-frontend-core 0.0.503 → 0.0.504-snapshot.20260801181709

package/dist/{chunk-HR6F6IP4.js → chunk-DIKJLAMY.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   ContactForm
-} from "./chunk-CLQEBWV7.js";
+} from "./chunk-QE55ROZW.js";
 import {
   DeliveryRow,
   DevCardRowContent,
@@ -10,7 +10,7 @@ import {
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "./chunk-OAWFYZZT.js";
+} from "./chunk-7DOSAJDK.js";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -36,18 +36,19 @@ import {
   formatRelativeTime,
   getStatusColorScheme,
   useChatAttachments,
-  useChatIdentity
-} from "./chunk-JGXAVNZQ.js";
+  useChatIdentity,
+  useOptionalTicketLive
+} from "./chunk-R6CKL7IR.js";
 import {
   STICKY_HEADER_OFFSET_PX,
   embedAuthedFetch,
   scrollElementIntoView,
   toast,
   useScrollToHash
-} from "./chunk-F7AD5CUU.js";
+} from "./chunk-H3N4P3CG.js";
 import {
   useRequiredChatRuntime
-} from "./chunk-6GT557KN.js";
+} from "./chunk-XKIA4XVE.js";
 import {
   usePathname,
   useRouter,
@@ -58,7 +59,7 @@ import {
   Input,
   Skeleton,
   init_button2 as init_button
-} from "./chunk-WHJGRRK2.js";
+} from "./chunk-QW7SW5HY.js";
 
 // src/components/tickets/ticket-center.tsx
 import { useCallback as useCallback4, useState as useState4 } from "react";
@@ -75,7 +76,7 @@ function isOptimistic(t) {
   return t._optimistic === true;
 }
 var TICKET_TEXT_MAX_CHARS = 5e3;
-var TICKET_LIVE_POLL_MS = 8e3;
+var TICKET_MARK_READ_DEBOUNCE_MS = 2e3;
 var TOAST_COPY = {
   open_success: { title: "Ticket opened", description: "We received your message and will follow up shortly." },
   open_mirror_pending: { title: "Ticket opened", description: "Syncing \u2014 your ticket will appear momentarily." },
@@ -211,7 +212,7 @@ function TicketOpenForm({
 }
 
 // src/components/tickets/ticket-row.tsx
-import { useCallback as useCallback2, useRef } from "react";
+import { useCallback as useCallback2, useRef as useRef2 } from "react";
 
 // src/components/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
@@ -220,12 +221,13 @@ var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 
 // src/components/tickets/ticket-detail-drawer.tsx
 init_button();
+import { useEffect, useRef } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
 
 // src/components/tickets/hooks/use-ticket-engagements.ts
 import { useQuery } from "@tanstack/react-query";
 var LIST_ENGAGEMENTS_ENDPOINT = "/api/chat/agent/list-engagements";
-function useTicketEngagements(externalTicketId, enabled = true, refetchInterval = false) {
+function useTicketEngagements(externalTicketId, enabled = true) {
   const identity = useChatIdentity();
   const identityKey = identity.user?.email ?? "anon";
   const listEngagementsEndpoint = useRequiredChatRuntime().endpoints.listEngagementsUrl ?? LIST_ENGAGEMENTS_ENDPOINT;
@@ -241,11 +243,10 @@ function useTicketEngagements(externalTicketId, enabled = true, refetchInterval
     gcTime: 0,
     refetchOnMount: "always",
     refetchOnWindowFocus: true,
-    // Live conversation: poll while the caller opts in (drawer open). New
-    // agent replies + attachments appear within one interval without a
-    // manual refresh. `refetchIntervalInBackground` stays false (default)
-    // so polling pauses on a hidden tab.
-    refetchInterval,
+    // NO interval polling (deleted 2026-08): new agent replies arrive via
+    // `TicketLiveProvider`'s stream-driven invalidation of
+    // `['ticket-engagements', id]`; focus/mount refetch is the no-stream
+    // fallback.
     queryFn: async () => {
       const response = await embedAuthedFetch(listEngagementsEndpoint, {
         method: "POST",
@@ -504,11 +505,33 @@ var TICKET_FEED_SKELETON_ROWS = 6;
 function TicketTimelinePanel({ ticket }) {
   const identity = useChatIdentity();
   const externalId = isOptimistic(ticket) ? null : ticket.external_id;
-  const { engagements, isLoading } = useTicketEngagements(
-    externalId,
-    !!externalId,
-    TICKET_LIVE_POLL_MS
-  );
+  const { engagements, isLoading } = useTicketEngagements(externalId, !!externalId);
+  const live = useOptionalTicketLive();
+  const setOpenTicketId = live?.setOpenTicketId;
+  const markRead = live?.markRead;
+  const markReadDebounceRef = useRef(null);
+  useEffect(() => {
+    if (!externalId || !setOpenTicketId || !markRead) return;
+    setOpenTicketId(externalId);
+    void markRead(externalId);
+    return () => {
+      if (markReadDebounceRef.current) {
+        clearTimeout(markReadDebounceRef.current);
+        markReadDebounceRef.current = null;
+        void markRead(externalId);
+      }
+      setOpenTicketId(null);
+    };
+  }, [externalId, setOpenTicketId, markRead]);
+  const engagementsCount = engagements.length;
+  useEffect(() => {
+    if (!externalId || !markRead || engagementsCount === 0) return;
+    if (markReadDebounceRef.current) clearTimeout(markReadDebounceRef.current);
+    markReadDebounceRef.current = setTimeout(() => {
+      markReadDebounceRef.current = null;
+      void markRead(externalId);
+    }, TICKET_MARK_READ_DEBOUNCE_MS);
+  }, [engagementsCount, externalId, markRead]);
   const { scrollRef, contentRef } = useStickToBottom({ initial: "instant", resize: "smooth" });
   const bodyTurns = ticket.body ? ticket.body.split(TURN_SEPARATOR_RE).map((t) => t.trim()).filter(Boolean) : [];
   const customerEngagementBodies = new Set(
@@ -693,7 +716,7 @@ function TicketRow({
   id
 }) {
   const optimistic = isOptimistic(ticket);
-  const rowRef = useRef(null);
+  const rowRef = useRef2(null);
   const handleClick = useCallback2(() => {
     onToggle(ticket.id);
     scrollElementIntoView(rowRef.current, {
@@ -783,7 +806,6 @@ function useTicketsList(filters) {
   const pageSize = Math.max(1, Math.min(100, Math.floor(filters.pageSize ?? DEFAULT_PAGE_SIZE) || DEFAULT_PAGE_SIZE));
   const enabled = !!customerEmail;
   const identityKey = customerEmail || "anon";
-  const refetchInterval = filters.refetchInterval ?? false;
   const query = useQuery2({
     queryKey: ["tickets", "self", identityKey, search, statusFilter, page, pageSize],
     enabled,
@@ -796,10 +818,8 @@ function useTicketsList(filters) {
     gcTime: 0,
     refetchOnMount: "always",
     refetchOnWindowFocus: true,
-    // Live status: poll while the caller opts in (drawer open). Defaults to
-    // false. `refetchIntervalInBackground` stays false (the default) so polling
-    // pauses on a hidden tab — no wasted requests when the user tabs away.
-    refetchInterval,
+    // NO interval polling (deleted 2026-08): live freshness is push-driven
+    // — `TicketLiveProvider` invalidates `['tickets']` on stream events.
     queryFn: async () => {
       const body = {
         query: search,
@@ -861,7 +881,7 @@ function useTicketsList(filters) {
 }
 
 // src/components/tickets/hooks/use-ticket-actions.ts
-import { useCallback as useCallback3, useEffect, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo, useRef as useRef3, useState as useState3 } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 var TICKET_ACTION_ENDPOINT = "/api/chat/agent/ticket-action";
 var REPLY_BANNER_CODES = /* @__PURE__ */ new Set([
@@ -874,10 +894,12 @@ var MIRROR_SYNC_BACKOFF_MS = [3e3, 6e3, 12e3];
 function useTicketActions(options) {
   const queryClient = useQueryClient();
   const ticketActionEndpoint = useRequiredChatRuntime().endpoints.ticketActionUrl ?? TICKET_ACTION_ENDPOINT;
+  const ticketLive = useOptionalTicketLive();
+  const notifyTicketCreated = ticketLive?.notifyTicketCreated;
   const { prependOptimistic, removeOptimistic, removeTicketFromCache, toast: toast2, onSupportSystemDown } = options;
-  const formInFlightRef = useRef2(false);
+  const formInFlightRef = useRef3(false);
   const [isSubmittingForm, setIsSubmittingForm] = useState3(false);
-  const busyRowsRef = useRef2(/* @__PURE__ */ new Set());
+  const busyRowsRef = useRef3(/* @__PURE__ */ new Set());
   const [busyRows, setBusyRows] = useState3(() => /* @__PURE__ */ new Set());
   const setRowBusy = useCallback3((id, busy) => {
     if (busy) busyRowsRef.current.add(id);
@@ -905,8 +927,8 @@ function useTicketActions(options) {
     (externalId) => setReplyError(externalId, null),
     [setReplyError]
   );
-  const watcherControllersRef = useRef2(/* @__PURE__ */ new Map());
-  useEffect(() => {
+  const watcherControllersRef = useRef3(/* @__PURE__ */ new Map());
+  useEffect2(() => {
     return () => {
       for (const controller of watcherControllersRef.current.values()) {
         controller.abort();
@@ -914,7 +936,7 @@ function useTicketActions(options) {
       watcherControllersRef.current.clear();
     };
   }, []);
-  const queueRef = useRef2(Promise.resolve());
+  const queueRef = useRef3(Promise.resolve());
   const enqueue = useCallback3((work) => {
     const next = queueRef.current.then(work, work);
     queueRef.current = next.catch(() => void 0);
@@ -982,7 +1004,7 @@ function useTicketActions(options) {
     },
     [queryClient, removeOptimistic, toast2]
   );
-  const lastUpdateErrorRef = useRef2(null);
+  const lastUpdateErrorRef = useRef3(null);
   const surfaceError = useCallback3(
     (err, action) => {
       const mapped = mapTicketActionError(err);
@@ -1044,6 +1066,7 @@ function useTicketActions(options) {
             await queryClient.invalidateQueries({ queryKey: ["tickets"] });
             removeOptimistic(placeholderId);
           }
+          notifyTicketCreated?.();
           return true;
         });
       } catch (err) {
@@ -1063,6 +1086,7 @@ function useTicketActions(options) {
       queryClient,
       toast2,
       watchMirrorSync,
+      notifyTicketCreated,
       surfaceError
     ]
   );
@@ -1454,7 +1478,7 @@ import { useQueryClient as useQueryClient3 } from "@tanstack/react-query";
 init_unified_pagination();
 
 // src/components/tickets/help-center-card.tsx
-import { useCallback as useCallback5, useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect3, useRef as useRef4 } from "react";
 import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function HelpCenterCard({
   ticket,
@@ -1479,11 +1503,11 @@ function HelpCenterCard({
   const description = ticket.preview ?? ticket.body ?? "";
   const isExpandable = !optimistic;
   const isExpanded = expanded && isExpandable;
-  const rowRef = useRef3(null);
+  const rowRef = useRef4(null);
   const handleClick = useCallback5(() => {
     onToggle(ticket.id);
   }, [onToggle, ticket.id]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isExpanded) return;
     const raf = requestAnimationFrame(() => {
       scrollElementIntoView(rowRef.current, {
@@ -1492,7 +1516,18 @@ function HelpCenterCard({
     });
     return () => cancelAnimationFrame(raf);
   }, [isExpanded]);
+  const live = useOptionalTicketLive();
+  const unreadCount = !optimistic && ticket.external_id && live?.unreadByTicket[ticket.external_id] || 0;
   const rightBadges = /* @__PURE__ */ jsxs6(Fragment, { children: [
+    unreadCount > 0 && /* @__PURE__ */ jsx7(
+      StatusBadge,
+      {
+        text: `${unreadCount} NEW`,
+        colorScheme: "warning",
+        variant: "card",
+        className: "border border-ods-border"
+      }
+    ),
     /* @__PURE__ */ jsx7(
       StatusBadge,
       {
@@ -1768,12 +1803,12 @@ function HelpCenterListAuthed({
     customerEmail: sessionEmail,
     search,
     status,
-    page,
-    // Live status: while a drawer is open, poll so an out-of-band HubSpot
-    // status change (e.g. agent closes the ticket) flips the badge +
-    // open/reopen affordance within one interval. Idle (no drawer) → no poll.
-    // `ticketParam` (the open ticket's external_id) is the open signal.
-    refetchInterval: ticketParam ? TICKET_LIVE_POLL_MS : false
+    page
+    // No interval polling (deleted 2026-08): `TicketLiveProvider`
+    // invalidates `['tickets']` on stream events; focus/mount refetch
+    // covers hosts without a stream. Disclosed trade-off: a bare
+    // status/pipeline change with no accompanying reply has no live
+    // path until the next event/focus/reconnect.
   });
   const expandedTicketId = ticketParam && tickets.find((t) => t.external_id === ticketParam)?.id || null;
   const prependOptimistic = useCallback6((placeholder) => {
@@ -1913,4 +1948,4 @@ export {
   HelpCenterCreateForm,
   HelpCenterList
 };
-//# sourceMappingURL=chunk-HR6F6IP4.js.map
+//# sourceMappingURL=chunk-DIKJLAMY.js.map