creatixchu
1da466a0a6
新增 sendSession 回显编排、ChatView 回显渲染与 rpcId 去重、control 队列 rpcId 投影、HistoricalImageCache.seed、MessageImage 预览 arm 的测试；四个包 README 双语更新；Agent Note 记录 rpcId 关联与延帧退休决策。
5.4 KiB
description, kind
| description | kind |
|---|---|
| Attachment presentation for the conversation UI: draft-image rail, document drop target, history-image gallery, and original-image lightbox; for users and maintainers of the Web attachment experience. | package-reference |
@deepseek-ai/dsh-client-ui-attachment
English | 中文
Summary
This package renders everything the conversation UI shows about attachments: pending draft images under the composer, a full-viewport drop invitation, durable images in Chat and Trajectory, and a lightbox for the original image. It is a pure presentation layer — attachment data, image loading, and callbacks come from the conversation package through declared slots. Choose it for the DeepSeek Chat-style image experience; non-image files have no surface here.
Table of Contents
- Use this package
- Understand the implementation
- Further Exploration
- Model Experience
- Known Limitations and Deferred Work
- Dev Note
Use this package
Mount this plugin alongside ui-conversation; it waits for the conversation package's slot declarations and registers its surfaces into them. Users then see the draft-image rail with per-image remove and click-to-open, the drop overlay with its limits line, message images sized by count, and the Escape/mask/close lightbox.
Draft images
A draft image shows as a fixed 64px thumbnail in one horizontally scrolling row; edge arrows page the rail when overflow hides items, and the scrollbar stays hidden. A newly added item is revealed at the rail's end, removal keeps the scroll position, and a single click opens the original through the owner's onOpen.
Message images and the lightbox
A message's lone image renders at 240px on its longer edge (aspect clamped to [0.25, 4], never upscaled); images among several render as fixed 64px squares. A loaded image opens the document-level lightbox on click; a failed load shows a retry control instead. The lightbox closes on Escape, a mask press, or its close control, and restores focus to its opener.
Drop overlay
While a file drag is over the page, the full-viewport overlay announces the drop: illustration, title, and a limits line when drops are accepted. The overlay only shows state — the owner's document-level listeners decide accept or reject.
Understand the implementation
Implementation internals — click to expand
The plugin waits for conversation.input.attachments, conversation.message.images, and conversation.trajectory.images through ctx.slots.inject. It then registers the composer rail, document drop target, shared history gallery for Chat and Trajectory, and original-image lightbox. The presentation components are pure props: the conversation slot owner supplies attachment data, image loading, callbacks, and the locale translator; the package entry exports no components.
| File | Role |
|---|---|
src/client/ComposerAttachments.tsx |
Draft-image rail + drop overlay assembly |
src/AttachmentRail.tsx |
Scrolling thumbnail rail, wheel translation, edge arrows |
src/client/MessageImages.tsx |
Per-message gallery + lightbox assembly |
src/MessageImage.tsx |
Single image sizing, load/retry, click-to-open; local submission-echo previews render their object URL directly |
src/ImageLightbox.tsx |
Document-level modal preview over the shared mask |
src/DropOverlay.tsx |
Pointer-inert drag invitation portal |
Further Exploration
Read these pages when the attachment surface is not enough. They move from the slots this package fills to the conversation shell that owns the input flow.
- ui-conversation — declares the attachment slots and owns the composer and image intake.
- Web client architecture — how browser plugin rows load and register slots.
- Client package map — adjacent browser UI packages.
Model Experience
None, as the plugin only renders attachment state supplied by the conversation UI and contributes no model-visible input.
KV Cache effect
None; this package neither assembles nor sends a provider request.
Known Limitations and Deferred Work
These limits define the current attachment surface. They are package constraints, not a general image-viewer comparison or a task backlog.
- Images only — non-image files have no rail card or history renderer yet; DeepSeek Chat-style file cards and upload progress wait until the composer accepts non-image attachments.
- No zoom or download in the lightbox — the preview renders the original at fit-to-viewport size only.
- The lightbox does not trap focus — it sets
aria-modaland restores focus on close, but Tab can reach the page behind it.
Dev Note
Working context for maintainers — click to expand
None.