Commit 6df0add6e65b7c0040b5774635f794e4ff802ddd | the-knife

apps/web/src/components/ChatMarkdown.tsx+37-27

 @@ -88,6 +88,7 @@ import {
   type ExpandedImagePreview,
 } from "./chat/ExpandedImagePreview";
 import { ExpandedImageDialog } from "./chat/ExpandedImageDialog";
+import { markdownImageGallery, markdownImageItems } from "./chat/markdownImageGallery";
 import { MediaVideoPlayer } from "./media/MediaVideoPlayer";
 import { MediaActions, type MediaActionSource } from "./media/MediaActions";
 import { resolveProtocolRelativeMediaUrl } from "./media/mediaContent";
 @@ -1283,10 +1284,7 @@ const MarkdownLinkContext = React.createContext(false);
 function expandableMarkdownImageProps(
   onImageExpand: ((preview: ExpandedImagePreview) => void) | undefined,
-  src: string,
   alt: string,
-  originalUrl?: string,
-  actionsSource?: MediaActionSource,
 ) {
   if (!onImageExpand) return {};
   const previewName = alt.trim() || "image";
 @@ -1294,17 +1292,8 @@ function expandableMarkdownImageProps(
     if (event.currentTarget.closest("a")) return;
     event.preventDefault();
     event.stopPropagation();
-    onImageExpand({
+    const item = markdownImageItems.get(event.currentTarget);
-      images: [
+    if (item) onImageExpand(markdownImageGallery(event.currentTarget, item));
-        {
-          src,
-          name: previewName,
-          ...(originalUrl ? { originalUrl } : {}),
-          ...(actionsSource ? { actionsSource } : {}),
-        },
-      ],
-      index: 0,
-    });
   };
   return {
     role: "button" as const,
 @@ -1398,9 +1387,19 @@ function ChatMarkdownImage(props: {
   // A failure forgets the decoded image so the next URL loads behind the slot.
   const settled = src !== null && !failed && (!props.standalone || loadedSrc !== null);
   // Cached images are complete before `onLoad` can fire.
-  const markLoadedIfComplete = useCallback((image: HTMLImageElement | null) => {
+  const markLoadedIfComplete = useCallback(
-    if (image?.complete && image.naturalWidth > 0) setLoadedSrc(image.currentSrc || image.src);
+    (image: HTMLImageElement | null) => {
-  }, []);
+      if (!image) return;
+      if (image.complete && image.naturalWidth > 0) setLoadedSrc(image.currentSrc || image.src);
+      markdownImageItems.set(image, {
+        src,
+        name: props.alt.trim() || "image",
+        actionsSource: props.actionsSource,
+        ...(props.originalUrl ? { originalUrl: props.originalUrl } : {}),
+      });
+    },
+    [props.actionsSource, props.alt, props.originalUrl, src],
+  );
   const imageEvents = (loadingSrc: string) => ({
     onLoad: () => {
       setLoadedSrc(loadingSrc);
 @@ -1429,13 +1428,7 @@ function ChatMarkdownImage(props: {
             props.onImageExpand && "cursor-zoom-in",
           )}
           style={props.style}
-          {...expandableMarkdownImageProps(
+          {...expandableMarkdownImageProps(props.onImageExpand, props.alt)}
-            props.onImageExpand,
-            src,
-            props.alt,
-            props.originalUrl,
-            props.actionsSource,
-          )}
           {...imageEvents(src)}
         />
       </MediaActions>
 @@ -2173,6 +2166,7 @@ function useChatMarkdownState({
 }: ChatMarkdownProps) {
   const { resolvedTheme } = useTheme();
   const [localMediaPreview, setLocalMediaPreview] = useState<ExpandedImagePreview | null>(null);
+  const markdownRef = useRef<HTMLDivElement>(null);
   const expandMedia = onImageExpand ?? setLocalMediaPreview;
   const mediaRequestId = useRef(0);
   useEffect(() => {
 @@ -2203,7 +2197,7 @@ function useChatMarkdownState({
   );
   const preparedConnection = usePreparedConnection(environmentId);
   const openMarkdownMedia = useCallback(
-    (source: string, resolvedFilePath?: string) => {
+    (source: string, resolvedFilePath?: string, clickedImage?: HTMLImageElement | null) => {
       const requestId = ++mediaRequestId.current;
       void resolveMarkdownMediaPreview({
         source,
 @@ -2218,7 +2212,14 @@ function useChatMarkdownState({
           : undefined,
       }).then(
         (preview) => {
-          if (preview && mediaRequestId.current === requestId) expandMedia(preview);
+          if (preview && mediaRequestId.current === requestId) {
+            const selected = preview.images[preview.index];
+            expandMedia(
+              selected && selected.type !== "video" && markdownRef.current
+                ? markdownImageGallery(clickedImage ?? markdownRef.current, selected)
+                : preview,
+            );
+          }
         },
         (error: unknown) => {
           if (mediaRequestId.current !== requestId) return;
 @@ -2625,6 +2626,7 @@ function useChatMarkdownState({
   return {
     componentState,
     handleCopy,
+    markdownRef,
     markdownUrlTransform,
     localMediaPreview,
     setLocalMediaPreview,
 @@ -2812,7 +2814,13 @@ const CHAT_MARKDOWN_COMPONENTS = {
             ) {
               event.preventDefault();
               event.stopPropagation();
-              openMarkdownMedia(href);
+              openMarkdownMedia(
+                href,
+                undefined,
+                event.target instanceof HTMLImageElement
+                  ? event.target
+                  : event.currentTarget.querySelector("img"),
+              );
               return;
             }
             // A link to a change request in a workspace project opens beside the
 @@ -3116,6 +3124,7 @@ function ChatMarkdown({
   const {
     componentState,
     handleCopy,
+    markdownRef,
     markdownUrlTransform,
     localMediaPreview,
     setLocalMediaPreview,
 @@ -3133,6 +3142,7 @@ function ChatMarkdown({
   // complete source token instead of dropping it from the rendered message.
   return (
     <div
+      ref={markdownRef}
       className={cn(
         "chat-markdown w-full min-w-0 text-sm leading-relaxed text-foreground/80 [overflow-wrap:anywhere] [word-break:break-word]",
         className,

apps/web/src/components/chat/ExpandedImageDialog.tsx+17-12

 @@ -83,9 +83,14 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
       }
     : source;
-  const navigateImage = useCallback((direction: -1 | 1) => {
+  const navigateImage = useCallback(
-    setImageOffset((current) => current + direction);
+    (direction: -1 | 1) => {
-  }, []);
+      setImageOffset(
+        (current) => (current + direction + preview.images.length) % preview.images.length,
+      );
+    },
+    [preview.images.length],
+  );
   // The element that opened the preview gets focus back on close. Without
   // this a close button click leaves focus on the unmounted dialog, and the
 @@ -161,13 +166,13 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
       {preview.images.length > 1 && (
         <Button
           type="button"
-          size="icon"
+          size="icon-xl"
-          variant="ghost"
+          variant="overlay"
-          className="absolute left-2 top-1/2 z-20 -translate-y-1/2 text-white/90 hover:bg-white/10 hover:text-white sm:left-6"
+          className="absolute left-2 top-1/2 z-20 -translate-y-1/2 sm:left-6"
           aria-label="Previous image"
           onClick={() => navigateImage(-1)}
         >
-          <ChevronLeftIcon className="size-5" />
+          <ChevronLeftIcon className="size-7" />
         </Button>
       )}
       <MediaActions source={actionsSource}>
 @@ -209,7 +214,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
               onError={() => setFailedImageSrc(item.src)}
             />
           )}
-          <div className="mt-2 flex max-w-[92vw] items-center justify-center gap-1.5 text-xs text-muted-foreground/80">
+          <div className="mt-2 flex max-w-[92vw] items-center justify-center gap-1.5 text-xs text-white/80">
             <span className="truncate">
               {item.name}
               {preview.images.length > 1 ? ` (${index + 1}/${preview.images.length})` : ""}
 @@ -247,13 +252,13 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
       {preview.images.length > 1 && (
         <Button
           type="button"
-          size="icon"
+          size="icon-xl"
-          variant="ghost"
+          variant="overlay"
-          className="absolute right-2 top-1/2 z-20 -translate-y-1/2 text-white/90 hover:bg-white/10 hover:text-white sm:right-6"
+          className="absolute right-2 top-1/2 z-20 -translate-y-1/2 sm:right-6"
           aria-label="Next image"
           onClick={() => navigateImage(1)}
         >
-          <ChevronRightIcon className="size-5" />
+          <ChevronRightIcon className="size-7" />
         </Button>
       )}
     </div>,

apps/web/src/components/chat/markdownImageGallery.ts created+51

...	@@ -0,0 +1,51 @@
1	import { mediaKindFromPath } from "@t3tools/shared/filePreview";
2	import { mediaUrlReference } from "@t3tools/client-runtime/media-reference";
3	import type { ExpandedImageItem, ExpandedImagePreview } from "./ExpandedImagePreview";
4	import { resolveExternalWebLinkHost } from "./externalLinkContextMenu";
5	import { resolveProtocolRelativeMediaUrl } from "../media/mediaContent";
6
7	// Weak keys retain resolved media actions only while the rendered image is reachable.
8	export const markdownImageItems = new WeakMap<Element, ExpandedImageItem>();
9
10	/** Collect in document order only when opened, including PR sections separated by videos. */
11	export function markdownImageGallery(
12	element: Element,
13	selected: ExpandedImageItem,
14	): ExpandedImagePreview {
15	const scope = element.closest("[data-image-gallery]") ?? element.closest(".chat-markdown");
16	const images: ExpandedImageItem[] = [];
17	let index = -1;
18	for (const image of scope?.querySelectorAll("img") ?? []) {
19	const registered = markdownImageItems.get(image);
20	if (!registered) continue;
21	const link = image.closest("a");
22	const href = link?.getAttribute("href") ?? "";
23	if (link && mediaKindFromPath(href) !== "image") continue;
24	const linkedSource =
25	resolveExternalWebLinkHost(href) !== null ? resolveProtocolRelativeMediaUrl(href) : null;
26	const reference = mediaUrlReference(href);
27	const item = linkedSource
28	? {
29	...registered,
30	src: linkedSource,
31	originalUrl: href,
32	actionsSource: {
33	kind: "image" as const,
34	name: registered.name,
35	src: linkedSource,
36	...(reference ? { reference } : {}),
37	},
38	}
39	: registered;
40	if (
41	image === element \|\|
42	(!markdownImageItems.has(element) && index < 0 && item.src === selected.src)
43	) {
44	index = images.length;
45	images.push(selected);
46	} else {
47	images.push(item);
48	}
49	}
50	return index < 0 ? { images: [selected], index: 0 } : { images, index };
51	}

apps/web/src/components/pullRequest/PullRequestMarkdown.tsx+1-1

...	@@ -39,7 +39,7 @@ export function PullRequestMarkdown({	...	@@ -39,7 +39,7 @@ export function PullRequestMarkdown({
39	[repositoryUrl],	39	[repositoryUrl],
40	);	40	);
41	return (	41	return (
42	<div className={cn("space-y-3", className)}>	42	<div className={cn("space-y-3", className)} data-image-gallery>
43	{segments.map((segment) => {	43	{segments.map((segment) => {
44	if (segment.kind === "markdown") {	44	if (segment.kind === "markdown") {
45	return (	45	return (

apps/web/src/components/ui/button.tsx+1

...	@@ -51,6 +51,7 @@ const buttonVariants = cva(	...	@@ -51,6 +51,7 @@ const buttonVariants = cva(
51	link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",	51	link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
52	outline:	52	outline:
53	"[--control-icon-color:var(--contrast-muted-foreground)] border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",	53	"[--control-icon-color:var(--contrast-muted-foreground)] border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
		54	overlay: "border-transparent bg-black/70 text-white/65 [:hover,[data-pressed]]:bg-black/90",
54	secondary:	55	secondary:
55	"border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90",	56	"border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90",
56	"warning-outline":	57	"warning-outline":

author	maria <maria@kuuro.net> 2026-09-08 00:52:07-03:00
committer	GitHub <noreply@github.com> 2026-09-08 00:52:07-03:00
log	6df0add6e65b7c0040b5774635f794e4ff802ddd
tree	28d0ef2eb9d65e517ac820d7a2983066e0e5f21d
parent	5a18fb95e49ea8352963329f32d5e85cf3125e24
signature	Signed by PGP key B5690EEEBB952194

fix(web): navigate markdown images as galleries (#10625)