@flamingo-stack/openframe-frontend-core 0.0.214 → 0.0.215-snapshot.20260529010429

package/dist/components/tickets/index.js

@@ -9,11 +9,11 @@ import {
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "../../chunk-5OWDOFKK.js";
+} from "../../chunk-R6MLPU4A.js";
 import "../../chunk-4XLJWX2N.js";
 import {
   ContactForm
-} from "../../chunk-HWY35EAK.js";
+} from "../../chunk-7PCP7YQR.js";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,6 +28,7 @@ import {
   ChatAttachmentChipStrip,
   ChatTicketItem,
   Label,
+  SquareAvatar,
   StatusBadge,
   Textarea,
   embedAuthedFetch,
@@ -36,7 +37,7 @@ import {
   scrollElementIntoView,
   useChatAttachments,
   useChatIdentity
-} from "../../chunk-UKND27XC.js";
+} from "../../chunk-WQZP3JIZ.js";
 import {
   toast
 } from "../../chunk-HICZPTRR.js";
@@ -311,35 +312,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;
@@ -591,6 +604,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 +834,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 +854,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 +951,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 +990,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
       };
@@ -974,12 +1069,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 +1084,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 +1120,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 +1192,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",
@@ -1274,7 +1419,9 @@ function HelpCenterCard({
   onSendMessage,
   onClose,
   onReopen,
-  onActionCollapsed
+  onActionCollapsed,
+  replyError,
+  onClearReplyError
 }) {
   const optimistic = isOptimistic(ticket);
   const rawStatus = (ticket.status ?? "OPEN").toUpperCase();
@@ -1361,7 +1508,9 @@ function HelpCenterCard({
             onSendMessage,
             onClose,
             onReopen,
-            onActionCollapsed
+            onActionCollapsed,
+            replyError,
+            onClearReplyError
           }
         ) })
       ]
@@ -1647,7 +1796,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
       )) })