authorgravatar for 71498452+StiensWout@users.noreply.github.comWout Stiens <71498452+StiensWout@users.noreply.github.com> 2026-06-23 22:04:20+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-06-23 13:04:20-07:00
loga4964b3b363dc515fad04458e5936cd32053c659
treeaa55004d0dab1fceb314bdd0fc17d4265ecfd2d8
parentc6c64918f8c582cc8b12de155d6c9aae12037147
signature Signed by PGP key B5690EEEBB952194

[codex] fix: show standalone element-pick context (#3527)

Co-authored-by: Codex <codex@openai.com>

2 files changed, 33 insertions(+), 2 deletions(-)

apps/web/src/components/chat/MessagesTimeline.test.tsx+27
...@@ -193,6 +193,33 @@ describe("MessagesTimeline", () => {...@@ -193,6 +193,33 @@ describe("MessagesTimeline", () => {
193 expect(markup).toContain("Show full message");193 expect(markup).toContain("Show full message");
194 }, 20_000);194 }, 20_000);
195195
196 it("renders chips for standalone element-pick context messages", async () => {
197 const { MessagesTimeline } = await import("./MessagesTimeline");
198 const markup = renderToStaticMarkup(
199 <MessagesTimeline
200 {...buildProps()}
201 timelineEntries={[
202 buildUserTimelineEntry(
203 [
204 "<element_context>",
205 "- <SubmitButton> (Button.tsx:12):",
206 " url: https://example.com/dashboard",
207 " selector: button.submit",
208 " source: /repo/src/Button.tsx:12:5",
209 " html:",
210 ' <button class="submit">Save</button>',
211 "</element_context>",
212 ].join("\n"),
213 ),
214 ]}
215 />,
216 );
217
218 expect(markup).toContain("SubmitButton");
219 expect(markup).not.toContain("&lt;element_context");
220 expect(markup).not.toContain("<element_context");
221 });
222
196 it("keeps the copy button for collapsed long user messages", async () => {223 it("keeps the copy button for collapsed long user messages", async () => {
197 const { MessagesTimeline } = await import("./MessagesTimeline");224 const { MessagesTimeline } = await import("./MessagesTimeline");
198 const markup = renderToStaticMarkup(225 const markup = renderToStaticMarkup(
apps/web/src/components/chat/MessagesTimeline.tsx+6-2
...@@ -448,6 +448,10 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"...@@ -448,6 +448,10 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
448 visibleText = extracted.promptText;448 visibleText = extracted.promptText;
449 }449 }
450 const elementContextState = extractTrailingElementContexts(visibleText);450 const elementContextState = extractTrailingElementContexts(visibleText);
451 const elementContexts = [
452 ...displayedUserMessage.elementContexts,
453 ...elementContextState.contexts,
454 ];
451 const previewImages = userImages.filter((image) => image.name.startsWith("preview-annotation-"));455 const previewImages = userImages.filter((image) => image.name.startsWith("preview-annotation-"));
452 const regularImages = userImages.filter((image) => !image.name.startsWith("preview-annotation-"));456 const regularImages = userImages.filter((image) => !image.name.startsWith("preview-annotation-"));
453 const canRevertAgentWork = typeof row.revertTurnCount === "number";457 const canRevertAgentWork = typeof row.revertTurnCount === "number";
...@@ -495,9 +499,9 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"...@@ -495,9 +499,9 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
495 image={previewImages[index] ?? null}499 image={previewImages[index] ?? null}
496 />500 />
497 ))}501 ))}
498 {elementContextState.contexts.length > 0 ? (502 {elementContexts.length > 0 ? (
499 <div className="mb-2 flex flex-wrap gap-1.5">503 <div className="mb-2 flex flex-wrap gap-1.5">
500 {elementContextState.contexts.map((context) => (504 {elementContexts.map((context) => (
501 <UserMessageElementContextChip505 <UserMessageElementContextChip
502 key={`${context.header}:${context.body}`}506 key={`${context.header}:${context.body}`}
503 context={context}507 context={context}