spaps-issue-reporting-react 0.4.1 → 0.4.2

package/dist/index.mjs

@@ -125,13 +125,31 @@ var defaultIssueReportingCopy = {
   retryAction: "Retry",
   originHumanLabel: "Human",
   originMachineLabel: "Machine",
-  machineOriginFallback: "system"
+  machineOriginFallback: "system",
+  threadTitle: "Conversation",
+  threadDescription: "Messages from the support team about this report, and your replies.",
+  threadLoading: "Loading conversation...",
+  threadLoadFailed: "Failed to load the conversation",
+  threadEmpty: "No messages on this report yet.",
+  threadNeedsResponseBadge: "Needs your response",
+  threadAuthorOperator: "Support",
+  threadAuthorReporter: "You",
+  threadKindClarificationRequest: "Question",
+  threadKindReporterResponse: "Your reply",
+  threadKindFinalResponse: "Resolution",
+  threadResponsePlaceholder: "Write your response...",
+  threadResponseLabel: "Respond to the support team",
+  threadResponseSubmitAction: "Send response",
+  threadResponseSubmittingAction: "Sending...",
+  threadResponseConflict: "That response was already sent, or the message changed. Refresh and try again.",
+  threadResponseFailed: "Failed to send your response"
 };
 var issueReportingKeys = {
   all: ["spaps-issue-reporting"],
   status: (scope) => [...issueReportingKeys.all, "status", scope],
   history: (scope) => [...issueReportingKeys.all, "history", scope],
-  detail: (issueReportId) => [...issueReportingKeys.all, "detail", issueReportId]
+  detail: (issueReportId) => [...issueReportingKeys.all, "detail", issueReportId],
+  messages: (issueReportId) => [...issueReportingKeys.all, "messages", issueReportId]
 };
 function resolvePageUrl(getPageUrl) {
   if (getPageUrl) {
@@ -301,6 +319,27 @@ function getEntryPointClassName(state) {
   }
   return "text-slate-500";
 }
+function selectReporterVisibleMessages(messages) {
+  return messages.filter(
+    (message) => message.reporter_visible && message.state === "active"
+  ).slice().sort((a, b) => a.created_at.localeCompare(b.created_at));
+}
+function isReporterMessageConflict(error) {
+  if (!error || typeof error !== "object") {
+    return false;
+  }
+  const record = error;
+  const code = record.code ?? record.error?.code;
+  if (typeof code === "string" && code === "ISSUE_REPORT_MESSAGE_CONFLICT") {
+    return true;
+  }
+  const status = record.status ?? record.statusCode ?? record.status_code ?? void 0;
+  if (status === 409) {
+    return true;
+  }
+  const message = error instanceof Error ? error.message : typeof record.message === "string" ? record.message : "";
+  return /ISSUE_REPORT_MESSAGE_CONFLICT/i.test(message) || /\b409\b/.test(message);
+}
 function getIssueNoteLengthMessage(note, copy) {
   if (note.length < NOTE_MIN_LENGTH) {
     return `${NOTE_MIN_LENGTH - note.length} ${copy.noteMinimumSuffix}`;
@@ -424,6 +463,39 @@ function useIssueReportingMutations() {
     replyMutation
   };
 }
+function useIssueReportingMessages(issueReportId) {
+  const { client, isEligible } = useIssueReporting();
+  const listMessages = client.issueReporting.listMessages;
+  return useQuery({
+    queryKey: issueReportingKeys.messages(issueReportId ?? "none"),
+    queryFn: () => listMessages(issueReportId),
+    enabled: isEligible && Boolean(issueReportId) && Boolean(listMessages),
+    retry: false
+  });
+}
+function useIssueReportingMessageMutation(issueReportId) {
+  const queryClient = useQueryClient();
+  const { client } = useIssueReporting();
+  return useMutation({
+    mutationFn: (payload) => {
+      const submit = client.issueReporting.submitMessage;
+      if (!submit || !issueReportId) {
+        return Promise.reject(
+          new Error("This client does not support submitting messages.")
+        );
+      }
+      return submit(issueReportId, payload);
+    },
+    onSuccess: async () => {
+      if (!issueReportId) {
+        return;
+      }
+      await queryClient.invalidateQueries({
+        queryKey: issueReportingKeys.messages(issueReportId)
+      });
+    }
+  });
+}
 function IssueReportingProvider({
   client,
   isEligible,
@@ -453,6 +525,7 @@ function IssueReportingProvider({
   const [scope, setScope] = useState(
     () => resolveInitialScope(defaultScope, allowTenantScope)
   );
+  const [needsResponseMap, setNeedsResponseMap] = useState({});
   const [pageConfigs, setPageConfigs] = useState([]);
   const [registeredTargets, setRegisteredTargets] = useState(
     []
@@ -477,6 +550,21 @@ function IssueReportingProvider({
   useEffect(() => {
     setScope(resolveInitialScope(defaultScope, allowTenantScope));
   }, [allowTenantScope, defaultScope]);
+  const setNeedsResponse = useCallback(
+    (issueReportId, needsResponse) => {
+      setNeedsResponseMap((current) => {
+        if (Boolean(current[issueReportId]) === needsResponse) {
+          return current;
+        }
+        return { ...current, [issueReportId]: needsResponse };
+      });
+    },
+    []
+  );
+  const needsResponseIssueIds = useMemo(
+    () => Object.entries(needsResponseMap).filter(([, needs]) => needs).map(([id]) => id),
+    [needsResponseMap]
+  );
   const closePopover = useCallback(() => {
     setIsPopoverOpen(false);
   }, []);
@@ -664,7 +752,9 @@ function IssueReportingProvider({
       createMode,
       inputModes: resolvedInputModes,
       defaultInputMode: resolvedDefaultInputMode,
-      voice: resolvedVoiceConfig
+      voice: resolvedVoiceConfig,
+      needsResponseIssueIds,
+      setNeedsResponse
     }),
     [
       allowTenantScope,
@@ -680,6 +770,7 @@ function IssueReportingProvider({
       isReportMode,
       mergedCopy,
       modalState,
+      needsResponseIssueIds,
       openExistingIssueModal,
       openPageIssueModal,
       openPopover,
@@ -691,6 +782,7 @@ function IssueReportingProvider({
       resolvedVoiceConfig,
       scope,
       selectPanel,
+      setNeedsResponse,
       startNewIssue
     ]
   );
@@ -1109,7 +1201,8 @@ function IssueReportModalBody({
           children: isSubmitting ? copy.submittingAction : copy.submitAction
         }
       )
-    ] })
+    ] }),
+    mode !== "create" && issue ? /* @__PURE__ */ jsx2(IssueReportMessageThread, { issueReportId: issue.id }) : null
   ] });
 }
 function useIssueReportVoiceCapture({
@@ -1463,6 +1556,237 @@ function useAttachmentState(existingAttachments) {
     reset
   };
 }
+var REPORTER_MESSAGE_MIN_LENGTH = 1;
+var REPORTER_MESSAGE_MAX_LENGTH = 2e3;
+function generateIdempotencyKey() {
+  const cryptoObj = typeof globalThis !== "undefined" ? globalThis.crypto : void 0;
+  if (cryptoObj && typeof cryptoObj.randomUUID === "function") {
+    return `reporter-msg-${cryptoObj.randomUUID()}`;
+  }
+  return `reporter-msg-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function getMessageKindLabel(kind, copy) {
+  switch (kind) {
+    case "clarification_request":
+      return copy.threadKindClarificationRequest;
+    case "reporter_response":
+      return copy.threadKindReporterResponse;
+    case "final_response":
+      return copy.threadKindFinalResponse;
+    default:
+      return kind;
+  }
+}
+function getMessageKindClassName(kind) {
+  switch (kind) {
+    case "clarification_request":
+      return "bg-amber-100 text-amber-700";
+    case "final_response":
+      return "bg-emerald-100 text-emerald-700";
+    default:
+      return "bg-slate-100 text-slate-600";
+  }
+}
+function MessageBubble({
+  message,
+  copy
+}) {
+  const isReporter = message.actor.author_type === "reporter";
+  const isFinal = message.kind === "final_response";
+  const authorLabel = isReporter ? copy.threadAuthorReporter : copy.threadAuthorOperator;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn(
+        "flex flex-col gap-1",
+        isReporter ? "items-end" : "items-start"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: cn(
+                "rounded-full px-2 py-0.5 font-medium",
+                BADGE_TEXT,
+                getMessageKindClassName(message.kind)
+              ),
+              children: getMessageKindLabel(message.kind, copy)
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: cn("font-medium text-slate-600", LABEL_TEXT), children: authorLabel }),
+          /* @__PURE__ */ jsx2(
+            "time",
+            {
+              className: "text-xs text-slate-400",
+              dateTime: message.created_at,
+              children: formatRelativeTime(message.created_at)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              "max-w-[85%] whitespace-pre-wrap rounded-2xl border px-3 py-2 text-sm",
+              isReporter ? "border-slate-900 bg-slate-900 text-white" : isFinal ? "border-emerald-200 bg-emerald-50 text-emerald-950" : "border-slate-200 bg-white text-slate-800"
+            ),
+            children: message.body
+          }
+        )
+      ]
+    }
+  );
+}
+function ReporterResponseComposer({
+  issueReportId,
+  copy
+}) {
+  const mutation = useIssueReportingMessageMutation(issueReportId);
+  const idempotencyKeyRef = useRef2(generateIdempotencyKey());
+  const [body, setBody] = useState2("");
+  const [submitError, setSubmitError] = useState2(null);
+  const normalized = body.trim();
+  const isValid = normalized.length >= REPORTER_MESSAGE_MIN_LENGTH && normalized.length <= REPORTER_MESSAGE_MAX_LENGTH;
+  const isSubmitting = mutation.isPending;
+  const handleSubmit = async () => {
+    if (!isValid || isSubmitting) {
+      return;
+    }
+    setSubmitError(null);
+    try {
+      await mutation.mutateAsync({
+        body: normalized,
+        idempotency_key: idempotencyKeyRef.current
+      });
+      setBody("");
+      idempotencyKeyRef.current = generateIdempotencyKey();
+    } catch (error) {
+      if (isReporterMessageConflict(error)) {
+        setSubmitError(copy.threadResponseConflict);
+        idempotencyKeyRef.current = generateIdempotencyKey();
+        return;
+      }
+      setSubmitError(resolveErrorMessage(error, copy.threadResponseFailed));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
+    /* @__PURE__ */ jsx2(
+      "label",
+      {
+        htmlFor: "issue-report-thread-response",
+        className: cn(
+          "block font-medium uppercase tracking-wide text-slate-500",
+          LABEL_TEXT
+        ),
+        children: copy.threadResponseLabel
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        id: "issue-report-thread-response",
+        value: body,
+        onChange: (event) => setBody(event.target.value),
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            void handleSubmit();
+          }
+        },
+        placeholder: copy.threadResponsePlaceholder,
+        className: "h-24 w-full resize-none rounded-2xl border border-slate-300 px-3 py-2 text-sm text-slate-800 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200",
+        disabled: isSubmitting
+      }
+    ),
+    submitError ? /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700",
+        role: "alert",
+        children: submitError
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "rounded-full px-4 py-2 text-sm font-semibold text-white transition",
+          isValid && !isSubmitting ? "bg-slate-900 hover:bg-slate-800" : "cursor-not-allowed bg-slate-300"
+        ),
+        onClick: () => void handleSubmit(),
+        disabled: !isValid || isSubmitting,
+        children: isSubmitting ? copy.threadResponseSubmittingAction : copy.threadResponseSubmitAction
+      }
+    ) })
+  ] });
+}
+function IssueReportMessageThread({
+  issueReportId
+}) {
+  const { copy, client, setNeedsResponse } = useIssueReporting();
+  const supportsMessages = Boolean(client.issueReporting.listMessages);
+  const supportsSubmit = Boolean(client.issueReporting.submitMessage);
+  const query = useIssueReportingMessages(issueReportId);
+  const needsResponse = query.data?.needs_response ?? false;
+  useEffect2(() => {
+    setNeedsResponse(issueReportId, needsResponse);
+    return () => {
+      setNeedsResponse(issueReportId, false);
+    };
+  }, [issueReportId, needsResponse, setNeedsResponse]);
+  if (!supportsMessages) {
+    return null;
+  }
+  const visibleMessages = selectReporterVisibleMessages(query.data?.items ?? []);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": copy.threadTitle,
+      className: "mt-6 border-t border-slate-100 pt-5",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx2("h3", { className: "text-sm font-semibold text-slate-900", children: copy.threadTitle }),
+          needsResponse ? /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: cn(
+                "rounded-full px-2 py-0.5 font-medium",
+                BADGE_TEXT,
+                "bg-amber-100 text-amber-700"
+              ),
+              children: copy.threadNeedsResponseBadge
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx2("p", { className: "mt-1 text-xs text-slate-500", children: copy.threadDescription }),
+        query.isPending ? /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600", children: [
+          /* @__PURE__ */ jsx2(Spinner, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ jsx2("span", { children: copy.threadLoading })
+        ] }) : query.error ? /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
+          /* @__PURE__ */ jsx2("div", { children: resolveErrorMessage(query.error, copy.threadLoadFailed) }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full border border-rose-300 px-3 py-1 font-medium transition hover:bg-rose-100",
+              onClick: () => void query.refetch(),
+              children: copy.retryAction
+            }
+          )
+        ] }) : visibleMessages.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "mt-4 rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-6 text-center text-sm text-slate-500", children: copy.threadEmpty }) : /* @__PURE__ */ jsx2("ul", { className: "mt-4 space-y-3", children: visibleMessages.map((message) => /* @__PURE__ */ jsx2(MessageBubble, { message, copy }, message.id)) }),
+        supportsSubmit ? /* @__PURE__ */ jsx2(
+          ReporterResponseComposer,
+          {
+            issueReportId,
+            copy
+          }
+        ) : null
+      ]
+    }
+  );
+}
 function IssueReportModeBanner() {
   const { copy } = useIssueReporting();
   const reportMode = useReportMode();
@@ -2014,33 +2338,44 @@ function FloatingIssueReportButton({
     isReportMode,
     isPopoverOpen,
     openPopover,
-    closePopover
+    closePopover,
+    needsResponseIssueIds
   } = useIssueReporting();
   const status = useIssueReportingStatus();
   const entryPointState = getEntryPointState(status.data);
+  const needsResponse = needsResponseIssueIds.length > 0;
   if (!isEligible) {
     return null;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(IssueReportModeBanner, {}),
-    !isReportMode ? /* @__PURE__ */ jsx2("div", { className: cn("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName), children: /* @__PURE__ */ jsx2(IssueReportPopover, { children: /* @__PURE__ */ jsx2(
+    !isReportMode ? /* @__PURE__ */ jsx2("div", { className: cn("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName), children: /* @__PURE__ */ jsx2(IssueReportPopover, { children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        "aria-label": copy.entryAriaLabel,
+        "aria-label": needsResponse ? `${copy.entryAriaLabel} (${copy.threadNeedsResponseBadge})` : copy.entryAriaLabel,
         onClick: () => isPopoverOpen ? closePopover() : openPopover(),
         className: cn(
-          "flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-slate-300",
+          "relative flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-slate-300",
           status.isPending && "animate-pulse",
           className
         ),
-        children: /* @__PURE__ */ jsx2(
-          BugBeetle,
-          {
-            className: cn("h-6 w-6", getEntryPointClassName(entryPointState)),
-            weight: "fill"
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsx2(
+            BugBeetle,
+            {
+              className: cn("h-6 w-6", getEntryPointClassName(entryPointState)),
+              weight: "fill"
+            }
+          ),
+          needsResponse ? /* @__PURE__ */ jsx2(
+            "span",
+            {
+              "data-testid": "issue-report-needs-response-badge",
+              className: "absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-white bg-amber-500"
+            }
+          ) : null
+        ]
       }
     ) }) }) : null,
     /* @__PURE__ */ jsx2(IssueReportModal, {})
@@ -2092,6 +2427,7 @@ function ReportableSection({
 }
 export {
   FloatingIssueReportButton,
+  IssueReportMessageThread,
   IssueReportingPageConfig,
   IssueReportingProvider,
   ReportModeContext,
@@ -2105,9 +2441,13 @@ export {
   getIssueStatusClassName,
   isClosedIssueStatus,
   isOpenIssueStatus,
+  isReporterMessageConflict,
   issueReportingKeys,
+  selectReporterVisibleMessages,
   useIssueReporting,
   useIssueReportingHistory,
+  useIssueReportingMessageMutation,
+  useIssueReportingMessages,
   useIssueReportingMutations,
   useIssueReportingStatus,
   useReportMode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spaps-issue-reporting-react",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Shared React issue-reporting UI for Sweet Potato platform consumers",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,7 +40,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "date-fns": "^4.1.0",
-    "spaps-types": "^1.4.0"
+    "spaps-types": "^1.4.2"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",