Skip to content

Rename queued messages to follow-ups #2695

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brsbl merged 4 commits into from
Aug 29, 2026
Merged

Rename queued messages to follow-ups #2695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da0fb82
Rename queued messages to follow-ups
brsbl Aug 29, 2026
59044be
Keep mock-specific queue assertions
brsbl Aug 29, 2026
e318046
Restore follow-up heading hierarchy
brsbl Aug 29, 2026
d3757a8
Quiet the follow-up stack label
brsbl Aug 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 30 additions & 27 deletions apps/app/src/components/promptbox/banner/QueuedMessagesList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,35 +141,38 @@ afterEach(() => {

describe("QueuedMessagesList", () => {
it("toggles a few messages between the fitted drawer and collapsed modes", () => {
const { container, getByRole } = renderQueuedMessages([
const { container, getByRole, getByText } = renderQueuedMessages([
makeQueuedMessage("q_one", "First queued message"),
makeQueuedMessage("q_two", "Second queued message"),
]);
const header = container.querySelector<HTMLElement>(
"[data-queued-messages-mode]",
);
const surface = container.querySelector<HTMLElement>(
'section[aria-label="Queued messages"]',
'section[aria-label="Follow-ups"]',
);
const heading = getByText("Follow-ups");

expect(header?.getAttribute("data-queued-messages-mode")).toBe("drawer");
expect(heading.className).toContain("font-normal");
expect(heading.className).toContain("text-subtle-foreground");
expect(surface?.style.height).toBe("123px");
expect(
getByRole("button", { name: "Collapse queued messages" }).querySelector(
getByRole("button", { name: "Collapse follow-ups" }).querySelector(
'[data-icon="ChevronDown"]',
),
).not.toBeNull();

fireEvent.click(getByRole("button", { name: "Collapse queued messages" }));
fireEvent.click(getByRole("button", { name: "Collapse follow-ups" }));
expect(header?.getAttribute("data-queued-messages-mode")).toBe("collapsed");
expect(
getByRole("button", { name: "Show queued messages" }).querySelector(
getByRole("button", { name: "Show follow-ups" }).querySelector(
'[data-icon="ChevronUp"]',
),
).not.toBeNull();
expect(surface?.style.height).toBe("44px");

fireEvent.click(getByRole("button", { name: "Show queued messages" }));
fireEvent.click(getByRole("button", { name: "Show follow-ups" }));
expect(header?.getAttribute("data-queued-messages-mode")).toBe("drawer");
expect(surface?.style.height).toBe("123px");
});
Expand All @@ -185,11 +188,11 @@ describe("QueuedMessagesList", () => {
);

expect(header?.getAttribute("data-queued-messages-mode")).toBe("drawer");
fireEvent.click(getByRole("button", { name: "Expand queued messages" }));
fireEvent.click(getByRole("button", { name: "Expand follow-ups" }));
expect(header?.getAttribute("data-queued-messages-mode")).toBe("workspace");
fireEvent.click(getByRole("button", { name: "Collapse queued messages" }));
fireEvent.click(getByRole("button", { name: "Collapse follow-ups" }));
expect(header?.getAttribute("data-queued-messages-mode")).toBe("collapsed");
fireEvent.click(getByRole("button", { name: "Expand queued messages" }));
fireEvent.click(getByRole("button", { name: "Expand follow-ups" }));
expect(header?.getAttribute("data-queued-messages-mode")).toBe("workspace");
});

Expand All @@ -210,7 +213,7 @@ describe("QueuedMessagesList", () => {
<QueuedMessagesList {...sharedProps} queuedMessages={[firstMessage]} />,
);

fireEvent.click(getByRole("button", { name: "Collapse queued messages" }));
fireEvent.click(getByRole("button", { name: "Collapse follow-ups" }));
expect(
container
.querySelector("[data-queued-messages-mode]")
Expand Down Expand Up @@ -242,7 +245,7 @@ describe("QueuedMessagesList", () => {
makeQueuedMessage("q_two", "Second queued message"),
]);
const handle = getByRole("button", {
name: "Drag up to open the queue workspace",
name: "Drag up to open the follow-up workspace",
});
Object.defineProperty(handle, "setPointerCapture", {
configurable: true,
Expand Down Expand Up @@ -299,17 +302,17 @@ describe("QueuedMessagesList", () => {
]);

const sendButton = getByRole("button", {
name: "Send queued message 1 now",
name: "Send follow-up 1 now",
});
const editButton = getByRole("button", {
name: "Edit queued message 1",
name: "Edit follow-up 1",
});
const deleteButton = getByRole("button", {
name: "Delete queued message 1",
name: "Delete follow-up 1",
});

expect(
getByRole("button", { name: "Queued message 1 actions" }),
getByRole("button", { name: "Follow-up 1 actions" }),
).toBeTruthy();
expect(editButton).toBeTruthy();
expect(deleteButton).toBeTruthy();
Expand Down Expand Up @@ -390,14 +393,14 @@ describe("QueuedMessagesList", () => {
item.hasAttribute("data-queued-message-inline-editor"),
),
).toBe(true);
const editingLabel = getByText(/Editing queued message/u);
const editingLabel = getByText(/Editing follow-up/u);
expect(
editingLabel.closest('[data-inline-message-editor-frame="embedded"]'),
).not.toBeNull();
expect(getByTestId("inline-queue-editor")).toBeTruthy();

fireEvent.click(
getByRole("button", { name: "Stop editing queued message" }),
getByRole("button", { name: "Stop editing follow-up" }),
);
expect(onDismiss).toHaveBeenCalledOnce();
});
Expand Down Expand Up @@ -467,7 +470,7 @@ describe("QueuedMessagesList", () => {
/>,
);
const surface = container.querySelector<HTMLElement>(
'section[aria-label="Queued messages"]',
'section[aria-label="Follow-ups"]',
);

expect(surface?.style.height).toBe("240px");
Expand Down Expand Up @@ -514,7 +517,7 @@ describe("QueuedMessagesList", () => {
/>,
);

fireEvent.click(getByRole("button", { name: "Collapse queued messages" }));
fireEvent.click(getByRole("button", { name: "Collapse follow-ups" }));
expect(onDismiss).toHaveBeenCalledOnce();

rerender(<QueuedMessagesList {...sharedProps} />);
Expand All @@ -540,7 +543,7 @@ describe("QueuedMessagesList", () => {
if (this.hasAttribute("data-queue-test-footer")) {
return new DOMRect(0, 0, 600, 420);
}
if (this.getAttribute("aria-label") === "Queued messages") {
if (this.getAttribute("aria-label") === "Follow-ups") {
return new DOMRect(0, 0, 600, 240);
}
return nativeGetBoundingClientRect.call(this);
Expand Down Expand Up @@ -585,7 +588,7 @@ describe("QueuedMessagesList", () => {
);
const { container, rerender } = render(renderSurface(true));
const surface = container.querySelector<HTMLElement>(
'section[aria-label="Queued messages"]',
'section[aria-label="Follow-ups"]',
);
const composer = container.querySelector("[data-test-bottom-composer]");

Expand Down Expand Up @@ -618,7 +621,7 @@ describe("QueuedMessagesList", () => {
if (this.hasAttribute("data-queue-test-footer")) {
return new DOMRect(0, 0, 600, 340);
}
if (this.getAttribute("aria-label") === "Queued messages") {
if (this.getAttribute("aria-label") === "Follow-ups") {
return new DOMRect(0, 0, 600, 240);
}
if (this.hasAttribute("data-queued-messages-scroll")) {
Expand Down Expand Up @@ -670,7 +673,7 @@ describe("QueuedMessagesList", () => {
</div>,
);
const surface = container.querySelector<HTMLElement>(
'section[aria-label="Queued messages"]',
'section[aria-label="Follow-ups"]',
);

await waitFor(() => expect(surface?.style.height).toBe("360px"));
Expand Down Expand Up @@ -701,7 +704,7 @@ describe("QueuedMessagesList", () => {
if (this.hasAttribute("data-queue-test-footer")) {
return new DOMRect(0, 0, 600, 340);
}
if (this.getAttribute("aria-label") === "Queued messages") {
if (this.getAttribute("aria-label") === "Follow-ups") {
return new DOMRect(0, 0, 600, 240);
}
if (this.hasAttribute("data-queued-messages-scroll")) {
Expand Down Expand Up @@ -807,7 +810,7 @@ describe("QueuedMessagesList", () => {
if (this.hasAttribute("data-queue-test-footer")) {
return new DOMRect(0, 0, 600, 340);
}
if (this.getAttribute("aria-label") === "Queued messages") {
if (this.getAttribute("aria-label") === "Follow-ups") {
return new DOMRect(0, 0, 600, 240);
}
if (this.hasAttribute("data-queued-messages-scroll")) {
Expand Down Expand Up @@ -860,7 +863,7 @@ describe("QueuedMessagesList", () => {
</div>,
);
const surface = container.querySelector<HTMLElement>(
'section[aria-label="Queued messages"]',
'section[aria-label="Follow-ups"]',
);
const scroll = container.querySelector<HTMLElement>(
"[data-queued-messages-scroll]",
Expand All @@ -876,7 +879,7 @@ describe("QueuedMessagesList", () => {
'[data-inline-message-editor-frame="embedded"]',
);
expect(editorFrame?.firstElementChild?.textContent).toContain(
"Editing queued message",
"Editing follow-up",
);
expect(scroll?.scrollTop).toBe(expectedScrollTop);
},
Expand Down
30 changes: 16 additions & 14 deletions apps/app/src/components/promptbox/banner/QueuedMessagesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -642,7 +642,7 @@ const QueuedMessageRow = memo(function QueuedMessageRow({
!dragDisabled && "cursor-grab active:cursor-grabbing",
)}
disabled={dragDisabled}
aria-label={`Reorder queued message ${index + 1}`}
aria-label={`Reorder follow-up ${index + 1}`}
{...attributes}
{...listeners}
>
Expand Down Expand Up @@ -713,7 +713,7 @@ const QueuedMessageRow = memo(function QueuedMessageRow({
)}
disabled={actionDisabled || sendDisabled}
onClick={() => onSendImmediately(queuedMessage.id)}
aria-label={`Send queued message ${index + 1} now`}
aria-label={`Send follow-up ${index + 1} now`}
>
<Icon name="Sent" className="size-4" aria-hidden />
</Button>
Expand All @@ -737,7 +737,7 @@ const QueuedMessageRow = memo(function QueuedMessageRow({
queuedMessageIndex: index,
})
}
aria-label={`Edit queued message ${index + 1}`}
aria-label={`Edit follow-up ${index + 1}`}
>
<Icon name="Edit" className="size-4" aria-hidden />
</Button>
Expand All @@ -756,7 +756,7 @@ const QueuedMessageRow = memo(function QueuedMessageRow({
)}
disabled={actionDisabled}
onClick={() => onDelete(queuedMessage.id)}
aria-label={`Delete queued message ${index + 1}`}
aria-label={`Delete follow-up ${index + 1}`}
>
<Icon name="Trash2" className="size-4" aria-hidden />
</Button>
Expand All @@ -781,7 +781,7 @@ const QueuedMessageRow = memo(function QueuedMessageRow({
compact ? "size-7" : "size-8",
)}
disabled={actionDisabled}
aria-label={`Queued message ${index + 1} actions`}
aria-label={`Follow-up ${index + 1} actions`}
>
<Icon name="MoreHorizontal" className="size-4" aria-hidden />
</Button>
Expand Down Expand Up @@ -905,8 +905,8 @@ function QueuedMessageInlineEditorSlot({
>
<OverflowFade placement="above" tone="surface-raised" className="z-10" />
<InlineMessageEditorFrame
cancelLabel="Stop editing queued message"
label={`Editing queued message ${editor.queuedMessageIndex + 1}`}
cancelLabel="Stop editing follow-up"
label={`Editing follow-up ${editor.queuedMessageIndex + 1}`}
onCancel={editor.onDismiss}
>
<QueuedEditorTypeaheadLayoutContext.Provider value={setTypeaheadLayout}>
Expand Down Expand Up @@ -1454,10 +1454,10 @@ export function QueuedMessagesList({
const caretWillCollapse =
mode === "workspace" || (mode === "drawer" && queueFitsDrawer);
const caretLabel = caretWillCollapse
? "Collapse queued messages"
? "Collapse follow-ups"
: mode === "collapsed" && queueFitsDrawer
? "Show queued messages"
: "Expand queued messages";
? "Show follow-ups"
: "Expand follow-ups";
const handleCaretClick = () => {
if (caretWillCollapse) {
collapseDrawer();
Expand All @@ -1471,7 +1471,7 @@ export function QueuedMessagesList({
return (
<PromptStackCard
rootRef={surfaceRef}
ariaLabel="Queued messages"
ariaLabel="Follow-ups"
style={{ height: surfaceHeight }}
className={cn(
"relative z-10 flex min-h-0 flex-col overflow-hidden bg-surface-raised-solid shadow-lift",
Expand All @@ -1490,7 +1490,9 @@ export function QueuedMessagesList({
data-queued-messages-mode={mode}
>
<div className="flex min-w-16 items-baseline gap-1.5 pl-1">
<span className="text-xs font-medium text-foreground">Queued</span>
<span className="text-xs font-normal text-subtle-foreground">
Follow-ups
</span>
<span className="text-2xs text-subtle-foreground">
{queuedMessages.length}
</span>
Expand All @@ -1503,8 +1505,8 @@ export function QueuedMessagesList({
)}
aria-label={
mode === "workspace"
? "Drag down to dock the queue"
: "Drag up to open the queue workspace"
? "Drag down to dock follow-ups"
: "Drag up to open the follow-up workspace"
}
onPointerDown={handleSurfacePointerDown}
onPointerMove={handleSurfacePointerMove}
Expand Down
Loading