feat: inline image groups via spec blocks#825
Merged
Conversation
- Add Grid and Image components to the json-render catalog so the LLM can embed inline image groups with a fixed-column layout that reserves cell widths upfront (no reflow as images stream in). - Extend the image embedding prompt: LLM must copy src/sourceUrl/title/ description verbatim from search tool output and wrap groups in a Grid. - Enrich Tavily provider results: preserve image titles and best-effort match them to results[].url so image credits can link to the source article instead of the image host. - Add SearchResultImage.title and SearchResultImage.sourceUrl to types. - Extract ImageCreditOverlay into a shared component used by both the search-results-image carousel and the new inline Image lightbox. - Replace the gray letterboxed image dialog with a dynamic one that fits to the image's natural size (max 90vw/85vh) with a transparent background. - Soften Dialog close button focus ring and switch to focus-visible so the ring only shows for keyboard navigation. - Add unit tests for parsing Grid/Image specs and for stripping multiple spec fences, plus a gated E2E test that verifies an LLM actually emits well-formed image spec blocks (RUN_LLM_E2E=1).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2ac63b47f3
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
- Split lib/render/registry.tsx into one file per catalog component
(components/{section-header,stack,question-button,grid,image}.tsx)
with a shared CatalogType/stackGap module. registry.tsx is now
just import + defineRegistry.
- Restrict ImageCreditOverlay links to http/https via URL.protocol
allowlist. Falls back to a non-clickable label when the sourceUrl
(model-generated) has an unsafe scheme — prevents javascript:/data:
XSS via inline image spec blocks (Codex P2).
- Re-run prettier on registry.tsx and tavily.ts (CI Format Check
was failing on the initial commit).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Extends the spec-block rendering system (#803) with inline image groups. LLM emits a
GridcontainingImagechildren via ```spec fences; the Grid reserves CSS grid columns upfront so streaming images don't reflow. Clicking any image opens a dynamic lightbox that fits the image's natural aspect ratio.Changes
Grid { columns, gap? }andImage { src, sourceUrl?, title?, description?, aspectRatio? }components, split into per-file modules underlib/render/components/.url/sourceUrl/title/descriptionverbatim from search tool output. Multiple image spec blocks allowed inline; related-questions block stays at the end.titleand best-effort matches it toresults[].urlto producesourceUrlpointing at the original article.ImageCreditOverlay(used by both the new Image dialog and the existing carousel). URL scheme allowlisted to http(s) to prevent XSS via model-generated links.Test plan