Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-17 15:24:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #301397 from microsoft/rebornix/accepted-stoat

Browse Source 
refactor: update image extraction description and enhance collection structure in AGENTS.md
This commit is contained in:
Peng Lyu
2026-03-12 23:01:09 -07:00
committed by GitHub
parent 51f72073e1 b659d183ce
commit f72d52ceef
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/vs/workbench/contrib/imageCarousel/AGENTS.md
View File

@@ -1,6 +1,6 @@
# Image Carousel
A generic workbench editor for viewing collections of images in a carousel/slideshow UI. Opens as a modal editor pane with navigation arrows, a counter, and a thumbnail strip.
A generic workbench editor for viewing collections of images in a carousel/slideshow UI. Opens as a modal editor pane with navigation arrows, a caption, and a thumbnail strip.
## Architecture
@@ -8,14 +8,14 @@ The image carousel is a self-contained workbench contribution that follows the *
- **URI scheme**: `vscode-image-carousel` (registered in `Schemas` in `src/vs/base/common/network.ts`) — used for `EditorInput.resource` identity.
- **Direct editor input**: Callers create `ImageCarouselEditorInput` with a collection and open it directly via `IEditorService.openEditor()`.
- **Image extraction**: `IImageCarouselService.extractImagesFromResponse()` extracts images from chat response tool invocations. The collection ID is derived from the chat response identity (`sessionResource + responseId`).
- **Image extraction**: `IImageCarouselService.extractImagesFromResponse()` extracts images from chat response tool invocations into a **sections-based** collection. All images from a single response are grouped into one section. The collection title is the user's chat request message. Each image caption is derived from the tool's `pastTenseMessage` (preferred) or `invocationMessage`.
## How to open the carousel
### From code (generic)
```ts
const collection: IImageCarouselCollection = { id, title, images: [...] };
const collection: IImageCarouselCollection = { id, title, sections: [{ title: '', images: [...] }] };
const input = new ImageCarouselEditorInput(collection, startIndex);
await editorService.openEditor(input, { pinned: true }, MODAL_GROUP);
```
@@ -37,6 +37,7 @@ Clicking an image attachment pill in chat (when `chat.imageCarousel.enabled` is
### DOM & rendering
- **DOM construction**: Uses the `h()` helper from `vs/base/browser/dom` with `@name` references for declarative DOM — no imperative `document.createElement` calls.
- **Bottom bar**: Caption and thumbnail sections are wrapped in a `div.bottom-bar` flex column below the image area.
- **Stable DOM skeleton**: Builds DOM once per `setInput()`, updates only changing parts to avoid flash on navigation.
- **Blob URL lifecycle**: Main image URLs tracked in `_imageDisposables` (revoked on nav), thumbnails in `_contentDisposables` (revoked on `clearInput()`).
- **Focus border suppressed**: The slideshow container uses `outline: none !important` on `:focus` / `:focus-visible` to override the workbench's global `[tabindex="0"]` focus styles.