@@ -242,6 +359,12 @@ function ExpandQueuedMessagesButton(props: {
);
}
+function sameEmail(left: string | undefined, right: string | undefined) {
+ return Boolean(
+ left && right && left.trim().toLowerCase() === right.trim().toLowerCase(),
+ );
+}
+
/** Render accepted mailbox rows as a compact stack attached above the composer. */
export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
cancelError?: boolean;
@@ -249,11 +372,19 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
cancelTargetInboundMessageId?: string;
/** Message ids already present in committed history. */
committedMessageIds?: readonly string[];
+ /** Conversation that owns stored attachment previews. */
+ conversationId?: string;
+ /** Inbound id of the row that an edit is taking out of the queue. */
+ editTargetInboundMessageId?: string;
messages: readonly ConversationMailboxMessage[];
onCancelMessage?: (message: ConversationMailboxMessage) => void;
+ /** Take the viewer's own queued web message back into the composer. */
+ onEditMessage?: (message: ConversationMailboxMessage) => void;
/** Fires after expand/collapse changes the stack height above the composer. */
onLayoutChange?: () => void;
onRetry?(message: ConversationMailboxMessage): void;
+ /** Email of the signed-in reader. Only their own web rows can be edited. */
+ viewerEmail?: string;
}): ReactNode {
const [expanded, setExpanded] = useState(false);
const onLayoutChangeRef = useRef(props.onLayoutChange);
@@ -283,6 +414,36 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
const visibleRows = showCollapsed ? previewRows : rows;
const hiddenCount = Math.max(0, rows.length - COLLAPSED_PENDING_ROW_COUNT);
const toggleExpanded = () => setExpanded((value) => !value);
+ const actionsDisabled =
+ Boolean(props.cancelPending) || Boolean(props.editTargetInboundMessageId);
+ const renderRow = (message: ConversationMailboxMessage) => {
+ const isTarget =
+ props.cancelTargetInboundMessageId === message.inboundMessageId;
+ // Only accepted server rows can leave the queue. Local rows are still sending.
+ const accepted = message.clientStatus === undefined;
+ return (
+
+ );
+ };
return (
{showCollapsed ? (
- // Desktop keeps a two-row preview; mobile collapses to the control only.
-
- {previewRows.map((message) => (
-
- ))}
-
+ // Desktop keeps a short preview; mobile collapses to the control only.
+
{previewRows.map(renderRow)}
) : (
- visibleRows.map((message) => (
-
- ))
+ visibleRows.map(renderRow)
)}
{canCollapse ? (
type === props.attachment.contentType,
diff --git a/packages/junior-dashboard/src/mock-reporting/fixtures.ts b/packages/junior-dashboard/src/mock-reporting/fixtures.ts
index ff15db5c84..0fb1d93de2 100644
--- a/packages/junior-dashboard/src/mock-reporting/fixtures.ts
+++ b/packages/junior-dashboard/src/mock-reporting/fixtures.ts
@@ -1944,6 +1944,14 @@ export function readMockConversationPendingMessages(
role: "user" as const,
source: "web" as const,
text: "Keep the reply in Junior. I will paste the dashboard link next.",
+ attachments: [
+ {
+ id: "qa-chart-png",
+ filename: "queued-chart.png",
+ contentType: "image/png",
+ bytes: 18211,
+ },
+ ],
},
{
actorIdentity: actor("dev@example.com", "Morgan Lee", "morgan"),
@@ -1978,6 +1986,28 @@ export function readMockConversationPendingMessages(
source: "web" as const,
text: "Fifth queued message.",
},
+ {
+ actorIdentity: actor("dev@example.com", "Morgan Lee", "morgan"),
+ createdAt: iso(nowMs, -800),
+ delivery: "defer" as const,
+ inboundMessageId: `${conversationId}:pending-sixth`,
+ messageId: `${conversationId}:pending-sixth`,
+ receivedAt: iso(nowMs, -400),
+ role: "user" as const,
+ source: "web" as const,
+ text: "Sixth queued message.",
+ },
+ {
+ actorIdentity: actor("dev@example.com", "Morgan Lee", "morgan"),
+ createdAt: iso(nowMs, -600),
+ delivery: "defer" as const,
+ inboundMessageId: `${conversationId}:pending-seventh`,
+ messageId: `${conversationId}:pending-seventh`,
+ receivedAt: iso(nowMs, -300),
+ role: "user" as const,
+ source: "web" as const,
+ text: "Seventh queued message.",
+ },
]
: [];
diff --git a/packages/junior-dashboard/tests/pending-mailbox-stack.test.tsx b/packages/junior-dashboard/tests/pending-mailbox-stack.test.tsx
index 4433078b90..5ce45ee151 100644
--- a/packages/junior-dashboard/tests/pending-mailbox-stack.test.tsx
+++ b/packages/junior-dashboard/tests/pending-mailbox-stack.test.tsx
@@ -97,6 +97,38 @@ describe("PendingMailboxStack remove control", () => {
expect(html).toContain('aria-label="Could not remove. Try again."');
});
+ it("shows edit only on the viewer's own accepted web rows", () => {
+ const own = { email: "Reader@example.com" };
+ const html = renderToStaticMarkup(
+ undefined}
+ viewerEmail="reader@example.com"
+ />,
+ );
+
+ expect(html.match(/aria-label="Edit queued message"/g)).toHaveLength(1);
+ });
+
it("hides mailbox rows already present in committed history", () => {
const html = renderToStaticMarkup(
{
});
it("uses the queue count on the mobile expand control", () => {
- const messages = Array.from({ length: 5 }, (_, index) =>
+ const messages = Array.from({ length: 7 }, (_, index) =>
message({
inboundMessageId: `accepted-${index + 1}`,
messageId: `accepted-${index + 1}`,
@@ -124,8 +156,8 @@ describe("PendingMailboxStack remove control", () => {
/>,
);
- expect(html).toContain("5 queued messages");
+ expect(html).toContain("7 queued messages");
expect(html).not.toContain("Show queued messages");
- expect(html.match(/5 queued messages/g)).toHaveLength(1);
+ expect(html.match(/7 queued messages/g)).toHaveLength(1);
});
});