creatixchu
87e3c95027
Body-portal the lightbox and toast so transformed ancestors cannot trap their fixed positioning (a lightbox opened from a chat message covered only the chat column); make the toast pointer-transparent; observe the rail element's own size instead of window resizes; consume vertical wheel ticks exclusively via a non-passive listener with LINE/PAGE delta normalization; keep the start position when the rail mounts over an existing draft; honor prefers-reduced-motion for the toast, remove-control, and paging; retry loads through the guarded load effect; note the deliberate promptError re-announce; pin the intake toast in the assembled snapshot; sync the superseded multimodal note and package docs.
3.3 KiB
@deepseek-ai/dsh-client-ui-attachment
English | 中文
Pure React attachment atoms (zero cordis): the composer draft-image rail (AttachmentRail), the chat-history image gallery (MessageImage/ImageGallery), and the original-image lightbox (ImageLightbox). Every string arrives through label props resolved by the owning plugin's own locale namespace, and nothing here reads application state; @deepseek-ai/dsh-client-ui-conversation is the current consumer, bridging its conversation dictionary through its image-labels module.
Attachment rail
AttachmentRail renders pending draft images as fixed 64px thumbnails (16px radius) in one horizontally scrolling row whose scrollbar stays hidden. Overflow is announced by circular edge arrows instead: each pages one viewport (minus one card of context, floored at 200px) with smooth scrolling (instant under prefers-reduced-motion: reduce), and arrow visibility is recomputed from scroll geometry on scroll, item-count changes, and rail size changes (a ResizeObserver on the rail element, so sidebar and panel resizes count, not only window resizes). A vertical wheel pans the rail horizontally through a non-passive listener that consumes the event — the same tick never also scrolls the conversation — with LINE/PAGE deltas normalized to pixels and per-tick travel clamped to 60px, while trackpad horizontal pans keep native scrolling. A newly added item is revealed at the rail's end; removal keeps the scroll position, and a rail that mounts over an already-populated draft keeps its start position. Each thumbnail opens its original through onOpen on a single click, and its remove control sits inside the card's top-right corner, hidden until the card is hovered or the control keyboard-focused; coarse-pointer (touch) surfaces show it permanently because they have no hover. The owner decides mounting and renders the rail only while items exist.
Message images and the lightbox
MessageImage renders one durable history image bounded to 240px on its longer edge, loading a session-authorized URL through the owner's ImageLoader; a failed load renders an explicit retry control, and a settled load answers a single click by opening ImageLightbox (clicks during loading are ignored). ImageGallery wraps a message's images in one aligned flex group (end for user messages, start for assistant messages) and renders nothing for an empty list. ImageLightbox is a document-level modal preview that closes on Escape, a backdrop press, or its close control, and restores focus to its opener on unmount.
Model Experience
None, as the package renders pure React atoms in the browser; nothing here reaches a model request.
KV Cache effect
None; this package neither assembles nor sends a provider request.
Known Limitations and Deferred Work
- Images only — non-image files have no rail card or history renderer yet; DeepSeek Chat-style file cards and upload-progress states 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 (behavior carried over from the pre-package component).