@flamingo-stack/openframe-frontend-core 0.0.215 → 0.0.216-snapshot.20260530192723

package/dist/components/tickets/index.js

@@ -1,19 +1,21 @@
 "use client";
 import {
-  ConversationCardRow,
-  ConversationCardRowSkeletonList,
   DeliveryRow,
-  DevCardRowContent,
-  DevCardRowSkeletonList,
-  DevSectionPage,
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "../../chunk-R6MLPU4A.js";
-import "../../chunk-4XLJWX2N.js";
+} from "../../chunk-2V4SACHE.js";
+import {
+  ConversationCardRow,
+  ConversationCardRowSkeletonList,
+  DevCardRowContent,
+  DevCardRowSkeletonList,
+  DevSectionPage
+} from "../../chunk-GVNQAGXB.js";
+import "../../chunk-ORJREQ2W.js";
 import {
   ContactForm
-} from "../../chunk-7PCP7YQR.js";
+} from "../../chunk-QTKU6ULP.js";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,6 +30,7 @@ import {
   ChatAttachmentChipStrip,
   ChatTicketItem,
   Label,
+  SquareAvatar,
   StatusBadge,
   Textarea,
   embedAuthedFetch,
@@ -36,32 +39,32 @@ import {
   scrollElementIntoView,
   useChatAttachments,
   useChatIdentity
-} from "../../chunk-WQZP3JIZ.js";
-import {
-  toast
-} from "../../chunk-HICZPTRR.js";
-import "../../chunk-CIPO6DXK.js";
-import "../../chunk-EDW2NVRV.js";
-import "../../chunk-W72U7OU7.js";
-import "../../chunk-ZG2YY5E7.js";
-import "../../chunk-MJNXIEV2.js";
+} from "../../chunk-CDLYRFDE.js";
 import "../../chunk-LXC6P2EO.js";
 import "../../chunk-EL5YVPD5.js";
-import {
-  usePathname,
-  useRouter,
-  useSearchParams
-} from "../../chunk-PLJLE4A4.js";
-import "../../chunk-CZR7ARBA.js";
 import {
   Button,
   Input,
   Skeleton,
   init_button2 as init_button
-} from "../../chunk-MX5MIFWA.js";
+} from "../../chunk-UEBM4PC4.js";
+import "../../chunk-OHPI2HRK.js";
+import {
+  toast
+} from "../../chunk-LCLTCCXS.js";
+import {
+  usePathname,
+  useRouter,
+  useSearchParams
+} from "../../chunk-PLJLE4A4.js";
+import "../../chunk-QY75VKAS.js";
 import "../../chunk-KSOOKNBG.js";
+import "../../chunk-EDW2NVRV.js";
 import "../../chunk-6U3IUD57.js";
-import "../../chunk-OHPI2HRK.js";
+import "../../chunk-W72U7OU7.js";
+import "../../chunk-RFONYT63.js";
+import "../../chunk-MJNXIEV2.js";
+import "../../chunk-CZR7ARBA.js";
 import "../../chunk-GGWZFCYS.js";
 
 // src/components/tickets/ticket-center.tsx
@@ -311,35 +314,47 @@ function TicketDetailDrawer({
   onSendMessage,
   onClose,
   onReopen,
-  onActionCollapsed
+  onActionCollapsed,
+  replyError,
+  onClearReplyError
 }) {
   const isClosed = (ticket.status ?? "").toUpperCase() === "CLOSED";
   return /* @__PURE__ */ jsxs2("div", { className: "bg-ods-card border-t border-ods-border px-4 py-4 flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx3(AssignedAgentRow, { assignedOwner: ticket.assignedOwner }),
     ticket.clickup && /* @__PURE__ */ jsx3(TicketLinkedDeliveryCard, { clickup: ticket.clickup }),
     /* @__PURE__ */ jsxs2("div", { children: [
       /* @__PURE__ */ jsx3("p", { className: "text-xs font-medium text-ods-text-secondary mb-2 uppercase tracking-wider", children: "Conversation" }),
       /* @__PURE__ */ jsx3(TicketTimelinePanel, { ticket })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "border-t border-ods-border pt-4", children: isClosed ? /* @__PURE__ */ jsx3(
-      ReopenAction,
-      {
-        ticketRef: { id: ticket.id, external_id: ticket.external_id },
-        busy,
-        supportSystemDown,
-        onReopen,
-        onActionCollapsed
-      }
-    ) : /* @__PURE__ */ jsx3(
-      OpenActions,
-      {
-        ticket,
-        busy,
-        supportSystemDown,
-        onSendMessage,
-        onClose,
-        onActionCollapsed
-      }
-    ) })
+    /* @__PURE__ */ jsxs2("div", { className: "border-t border-ods-border pt-4", children: [
+      replyError && /* @__PURE__ */ jsx3(
+        ReplyFailureBanner,
+        {
+          error: replyError,
+          onDismiss: onClearReplyError ?? (() => void 0)
+        }
+      ),
+      isClosed ? /* @__PURE__ */ jsx3(
+        ReopenAction,
+        {
+          ticketRef: { id: ticket.id, external_id: ticket.external_id },
+          busy,
+          supportSystemDown,
+          onReopen,
+          onActionCollapsed
+        }
+      ) : /* @__PURE__ */ jsx3(
+        OpenActions,
+        {
+          ticket,
+          busy,
+          supportSystemDown,
+          onSendMessage,
+          onClose,
+          onActionCollapsed
+        }
+      )
+    ] })
   ] });
 }
 var TURN_SEPARATOR_RE = /[\s]{1,16}---[\s]{1,16}/g;
@@ -348,6 +363,10 @@ function TicketTimelinePanel({ ticket }) {
   const externalId = isOptimistic(ticket) ? null : ticket.external_id;
   const { engagements, isLoading } = useTicketEngagements(externalId, !!externalId);
   const bodyTurns = ticket.body ? ticket.body.split(TURN_SEPARATOR_RE).map((t) => t.trim()).filter(Boolean) : [];
+  const customerEngagementBodies = new Set(
+    engagements.filter((e) => e.authorRole === "customer").map((e) => (e.body ?? "").trim()).filter(Boolean)
+  );
+  const suppressBodyTurnZero = bodyTurns.length > 0 && customerEngagementBodies.has(bodyTurns[0]);
   const sessionEmailLower = identity.user?.email?.trim().toLowerCase() ?? null;
   const isViewerTheCustomer = !!sessionEmailLower && ticket.customer_emails.some((e) => e.trim().toLowerCase() === sessionEmailLower);
   const viewerName = identity.user?.name?.trim() || null;
@@ -370,6 +389,7 @@ function TicketTimelinePanel({ ticket }) {
   }
   return /* @__PURE__ */ jsxs2("div", { className: "bg-ods-card border border-ods-border rounded-[6px] overflow-hidden w-full", children: [
     bodyTurns.map((turn, i) => {
+      if (i === 0 && suppressBodyTurnZero) return null;
       const isResolution = turn.startsWith("[Resolution]");
       const role = i === 0 ? "Original message" : isResolution ? "Resolution" : `Update ${i}`;
       const text = isResolution ? turn.replace(/^\[Resolution\]\s*/, "") : turn;
@@ -449,8 +469,7 @@ function ReopenAction({
   onActionCollapsed
 }) {
   const handleReopen = async () => {
-    const ok = await onReopen(ticketRef);
-    if (ok) onActionCollapsed();
+    void await onReopen(ticketRef);
   };
   return /* @__PURE__ */ jsx3("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx3(
     Button,
@@ -490,9 +509,8 @@ function OpenActions({
   };
   const confirmClose = async () => {
     setCloseDialogOpen(false);
-    const ok = await onClose(ticketRef, resolution.trim() || void 0);
+    await onClose(ticketRef, resolution.trim() || void 0);
     setResolution("");
-    if (ok) onActionCollapsed();
   };
   return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2", children: [
@@ -591,6 +609,56 @@ function OpenActions({
     ] }) })
   ] });
 }
+function ReplyFailureBanner({
+  error,
+  onDismiss
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "mb-3 flex items-start gap-3 rounded-md border border-ods-attention-red-error bg-ods-attention-red-error-secondary px-3 py-2 text-sm text-ods-attention-red-error",
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "font-medium leading-snug", children: error.message }),
+        /* @__PURE__ */ jsx3(
+          Button,
+          {
+            type: "button",
+            variant: "transparent",
+            onClick: onDismiss,
+            "aria-label": "Dismiss reply failure",
+            className: "ml-auto px-2 py-0.5 text-xs font-medium uppercase tracking-wider text-ods-attention-red-error hover:bg-ods-attention-red-error/10 border-transparent",
+            children: "Dismiss"
+          }
+        )
+      ]
+    }
+  );
+}
+function AssignedAgentRow({
+  assignedOwner
+}) {
+  const trimmedName = assignedOwner?.name?.trim() || null;
+  const emailFallback = assignedOwner?.email?.trim() || null;
+  const displayLabel = trimmedName ?? (emailFallback ? emailFallback.split("@")[0] : null);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-xs", children: [
+    /* @__PURE__ */ jsx3("span", { className: "text-ods-text-secondary uppercase tracking-wider font-medium", children: "Assigned to" }),
+    displayLabel ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1.5 text-ods-text-primary font-medium", children: [
+      /* @__PURE__ */ jsx3(
+        SquareAvatar,
+        {
+          size: "sm",
+          variant: "round",
+          src: assignedOwner?.avatarUrl ?? void 0,
+          alt: displayLabel,
+          fallback: displayLabel
+        }
+      ),
+      displayLabel
+    ] }) : /* @__PURE__ */ jsx3("span", { className: "text-ods-text-secondary italic", children: "Unassigned" })
+  ] });
+}
 
 // src/components/tickets/ticket-row.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -771,6 +839,12 @@ function useTicketsList(filters) {
 import { useCallback as useCallback2, useEffect, useMemo, useRef as useRef2, 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([
+  "HUBSPOT_5XX",
+  "HUBSPOT_400_VALIDATION",
+  "HUBSPOT_404_THREAD",
+  "HUBSPOT_REPLY_UNKNOWN"
+]);
 var MIRROR_SYNC_BACKOFF_MS = [3e3, 6e3, 12e3];
 function useTicketActions(options) {
   const queryClient = useQueryClient();
@@ -785,6 +859,26 @@ function useTicketActions(options) {
     setBusyRows(new Set(busyRowsRef.current));
   }, []);
   const isRowBusy = useCallback2((id) => busyRows.has(id), [busyRows]);
+  const [replyErrorByTicket, setReplyErrorByTicket] = useState3(() => /* @__PURE__ */ new Map());
+  const setReplyError = useCallback2(
+    (externalId, mapped) => {
+      setReplyErrorByTicket((prev) => {
+        const next = new Map(prev);
+        if (mapped) next.set(externalId, mapped);
+        else next.delete(externalId);
+        return next;
+      });
+    },
+    []
+  );
+  const replyErrorFor = useCallback2(
+    (externalId) => replyErrorByTicket.get(externalId) ?? null,
+    [replyErrorByTicket]
+  );
+  const clearReplyError = useCallback2(
+    (externalId) => setReplyError(externalId, null),
+    [setReplyError]
+  );
   const watcherControllersRef = useRef2(/* @__PURE__ */ new Map());
   useEffect(() => {
     return () => {
@@ -862,9 +956,11 @@ function useTicketActions(options) {
     },
     [queryClient, removeOptimistic, toast2]
   );
+  const lastUpdateErrorRef = useRef2(null);
   const surfaceError = useCallback2(
     (err, action) => {
       const mapped = mapTicketActionError(err);
+      lastUpdateErrorRef.current = mapped;
       if (mapped.supportSystemDown) onSupportSystemDown();
       toast2({
         title: `Could not ${action}`,
@@ -899,6 +995,10 @@ function useTicketActions(options) {
         // seconds via the mirror refetch. Drawer uses live chat
         // identity for own-replies during this window anyway.
         customer_name: null,
+        // No assignee until the real ticket lands. Drawer renders
+        // "Unassigned" for this brief window.
+        assigned_to: null,
+        assignedOwner: null,
         hubspot_updated_at: (/* @__PURE__ */ new Date()).toISOString(),
         _optimistic: true
       };
@@ -951,10 +1051,23 @@ function useTicketActions(options) {
             ticket_id: ticket.external_id
           });
           toast2(successCopy);
-          await Promise.all([
-            queryClient.invalidateQueries({ queryKey: ["tickets"] }),
-            queryClient.invalidateQueries({ queryKey: ["ticket-engagements"] })
-          ]);
+          const statusUpdate = serverArgs.status ?? null;
+          if (statusUpdate) {
+            queryClient.setQueriesData(
+              { queryKey: ["tickets"] },
+              (prev) => {
+                if (!prev || !Array.isArray(prev.tickets)) return prev;
+                let mutated = false;
+                const nextTickets = prev.tickets.map((t) => {
+                  if (t.id !== ticket.id || t.status === statusUpdate) return t;
+                  mutated = true;
+                  return { ...t, status: statusUpdate };
+                });
+                return mutated ? { ...prev, tickets: nextTickets } : prev;
+              }
+            );
+          }
+          await queryClient.invalidateQueries({ queryKey: ["ticket-engagements"] });
           return true;
         });
       } catch (err) {
@@ -974,12 +1087,13 @@ function useTicketActions(options) {
     [setRowBusy, enqueue, executeTicketAction, queryClient, toast2, surfaceError, removeTicketFromCache]
   );
   const sendMessage = useCallback2(
-    (ticket, text, attachments) => {
+    async (ticket, text, attachments) => {
       const trimmed = text.trim();
       const hasText = trimmed.length > 0;
       const hasFiles = attachments.length > 0;
-      if (!hasText && !hasFiles) return Promise.resolve(false);
-      return updateTicket(
+      if (!hasText && !hasFiles) return false;
+      lastUpdateErrorRef.current = null;
+      const ok = await updateTicket(
         ticket,
         {
           ...hasText ? { content_addendum: trimmed } : {},
@@ -988,8 +1102,18 @@ function useTicketActions(options) {
         TOAST_COPY.comment_success,
         "send message"
       );
+      if (ok) {
+        clearReplyError(ticket.external_id);
+      } else {
+        const mapped = lastUpdateErrorRef.current;
+        if (mapped && REPLY_BANNER_CODES.has(mapped.code)) {
+          setReplyError(ticket.external_id, mapped);
+        }
+        lastUpdateErrorRef.current = null;
+      }
+      return ok;
     },
-    [updateTicket]
+    [updateTicket, clearReplyError, setReplyError]
   );
   const closeTicket = useCallback2(
     (ticket, resolution) => updateTicket(
@@ -1014,9 +1138,20 @@ function useTicketActions(options) {
       closeTicket,
       reopenTicket,
       isSubmittingForm,
-      isRowBusy
+      isRowBusy,
+      replyErrorFor,
+      clearReplyError
     }),
-    [submitTicket, sendMessage, closeTicket, reopenTicket, isSubmittingForm, isRowBusy]
+    [
+      submitTicket,
+      sendMessage,
+      closeTicket,
+      reopenTicket,
+      isSubmittingForm,
+      isRowBusy,
+      replyErrorFor,
+      clearReplyError
+    ]
   );
 }
 var TicketActionFailure = class extends Error {
@@ -1075,6 +1210,34 @@ function mapTicketActionError(err) {
           supportSystemDown: false,
           removeRowFromCache: false
         };
+      case "HUBSPOT_5XX":
+        return {
+          code: err.code,
+          message: "We couldn't reach the support system. Your reply wasn't sent \u2014 please retry in a moment.",
+          supportSystemDown: false,
+          removeRowFromCache: false
+        };
+      case "HUBSPOT_400_VALIDATION":
+        return {
+          code: err.code,
+          message: "Your reply was rejected. Please rephrase or remove unsupported content and try again.",
+          supportSystemDown: false,
+          removeRowFromCache: false
+        };
+      case "HUBSPOT_404_THREAD":
+        return {
+          code: err.code,
+          message: "This conversation is no longer accepting replies. Open a new ticket to continue.",
+          supportSystemDown: false,
+          removeRowFromCache: false
+        };
+      case "HUBSPOT_REPLY_UNKNOWN":
+        return {
+          code: err.code,
+          message: "Your reply didn't go through. Please retry.",
+          supportSystemDown: false,
+          removeRowFromCache: false
+        };
       default:
         return {
           code: "UNKNOWN",
@@ -1098,9 +1261,11 @@ function cryptoRandomId() {
   return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
 }
 function cacheContainsTicket(queryClient, expectedTicketId) {
-  const entries = queryClient.getQueriesData({ queryKey: ["tickets"] });
+  const entries = queryClient.getQueriesData({
+    queryKey: ["tickets"]
+  });
   for (const [, data] of entries) {
-    if (Array.isArray(data) && data.some((t) => t.external_id === expectedTicketId)) {
+    if (data && Array.isArray(data.tickets) && data.tickets.some((t) => t.external_id === expectedTicketId)) {
       return true;
     }
   }
@@ -1274,7 +1439,9 @@ function HelpCenterCard({
   onSendMessage,
   onClose,
   onReopen,
-  onActionCollapsed
+  onActionCollapsed,
+  replyError,
+  onClearReplyError
 }) {
   const optimistic = isOptimistic(ticket);
   const rawStatus = (ticket.status ?? "OPEN").toUpperCase();
@@ -1361,7 +1528,9 @@ function HelpCenterCard({
             onSendMessage,
             onClose,
             onReopen,
-            onActionCollapsed
+            onActionCollapsed,
+            replyError,
+            onClearReplyError
           }
         ) })
       ]
@@ -1561,7 +1730,12 @@ function HelpCenterListAuthed({
     (ticketId) => {
       queryClient.setQueriesData(
         { queryKey: ["tickets"] },
-        (prev) => (prev ?? []).filter((t) => t.id !== ticketId)
+        (prev) => {
+          if (!prev || !Array.isArray(prev.tickets)) return prev;
+          const nextTickets = prev.tickets.filter((t) => t.id !== ticketId);
+          if (nextTickets.length === prev.tickets.length) return prev;
+          return { ...prev, tickets: nextTickets };
+        }
       );
       setExpandedTicketId((prev) => prev === ticketId ? null : prev);
     },
@@ -1647,7 +1821,9 @@ function HelpCenterListAuthed({
           onSendMessage: actions.sendMessage,
           onClose: actions.closeTicket,
           onReopen: actions.reopenTicket,
-          onActionCollapsed: () => setExpandedTicketId(null)
+          onActionCollapsed: () => setExpandedTicketId(null),
+          replyError: actions.replyErrorFor(ticket.external_id),
+          onClearReplyError: () => actions.clearReplyError(ticket.external_id)
         },
         ticket.id
       )) })