mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-26 17:16:52 +08:00
Feat: Images appearing consecutively in the dialogue are merged and displayed in a carousel. #10427 (#12051)
### What problem does this PR solve? Feat: Images appearing consecutively in the dialogue are merged and displayed in a carousel. #10427 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
139
web/src/components/markdown-content/image-carousel.tsx
Normal file
139
web/src/components/markdown-content/image-carousel.tsx
Normal file
@ -0,0 +1,139 @@
|
||||
import Image from '@/components/image';
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from '@/components/ui/carousel';
|
||||
import { IReference, IReferenceChunk } from '@/interfaces/database/chat';
|
||||
import { getExtension } from '@/utils/document-util';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
interface ImageCarouselProps {
|
||||
group: Array<{
|
||||
id: string;
|
||||
fullMatch: string;
|
||||
start: number;
|
||||
}>;
|
||||
reference: IReference;
|
||||
fileThumbnails: Record<string, string>;
|
||||
onImageClick: (
|
||||
documentId: string,
|
||||
chunk: IReferenceChunk,
|
||||
isPdf: boolean,
|
||||
documentUrl?: string,
|
||||
) => void;
|
||||
}
|
||||
|
||||
interface ReferenceInfo {
|
||||
documentUrl?: string;
|
||||
fileThumbnail?: string;
|
||||
fileExtension?: string;
|
||||
imageId?: string;
|
||||
chunkItem?: IReferenceChunk;
|
||||
documentId?: string;
|
||||
document?: any;
|
||||
}
|
||||
|
||||
const getReferenceInfo = (
|
||||
chunkIndex: number,
|
||||
reference: IReference,
|
||||
fileThumbnails: Record<string, string>,
|
||||
): ReferenceInfo => {
|
||||
const chunks = reference?.chunks ?? [];
|
||||
const chunkItem = chunks[chunkIndex];
|
||||
const document = reference?.doc_aggs?.find(
|
||||
(x) => x?.doc_id === chunkItem?.document_id,
|
||||
);
|
||||
const documentId = document?.doc_id;
|
||||
const documentUrl = document?.url;
|
||||
const fileThumbnail = documentId ? fileThumbnails[documentId] : '';
|
||||
const fileExtension = documentId ? getExtension(document?.doc_name) : '';
|
||||
const imageId = chunkItem?.image_id;
|
||||
|
||||
return {
|
||||
documentUrl,
|
||||
fileThumbnail,
|
||||
fileExtension,
|
||||
imageId,
|
||||
chunkItem,
|
||||
documentId,
|
||||
document,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Component to render image carousel for a group of consecutive image references
|
||||
*/
|
||||
export const ImageCarousel = ({
|
||||
group,
|
||||
reference,
|
||||
fileThumbnails,
|
||||
onImageClick,
|
||||
}: ImageCarouselProps) => {
|
||||
const getChunkIndex = (match: string) => Number(match);
|
||||
|
||||
const handleImageClick = useCallback(
|
||||
(
|
||||
imageId: string,
|
||||
chunkItem: IReferenceChunk,
|
||||
documentId: string,
|
||||
fileExtension: string,
|
||||
documentUrl?: string,
|
||||
) =>
|
||||
() =>
|
||||
onImageClick(
|
||||
documentId,
|
||||
chunkItem,
|
||||
fileExtension === 'pdf',
|
||||
documentUrl,
|
||||
),
|
||||
[onImageClick],
|
||||
);
|
||||
|
||||
return (
|
||||
<Carousel
|
||||
className="w-44"
|
||||
opts={{
|
||||
align: 'start',
|
||||
skipSnaps: false,
|
||||
}}
|
||||
>
|
||||
<CarouselContent>
|
||||
{group.map((ref) => {
|
||||
const chunkIndex = getChunkIndex(ref.id);
|
||||
const { documentUrl, fileExtension, imageId, chunkItem, documentId } =
|
||||
getReferenceInfo(chunkIndex, reference, fileThumbnails);
|
||||
|
||||
return (
|
||||
<CarouselItem key={ref.id}>
|
||||
<section>
|
||||
<Image
|
||||
id={imageId!}
|
||||
className="object-contain max-h-36"
|
||||
onClick={
|
||||
documentId && chunkItem
|
||||
? handleImageClick(
|
||||
imageId!,
|
||||
chunkItem,
|
||||
documentId,
|
||||
fileExtension!,
|
||||
documentUrl,
|
||||
)
|
||||
: () => {}
|
||||
}
|
||||
/>
|
||||
<span className="text-accent-primary">{imageId}</span>
|
||||
</section>
|
||||
</CarouselItem>
|
||||
);
|
||||
})}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="h-8 w-8" />
|
||||
<CarouselNext className="h-8 w-8" />
|
||||
</Carousel>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageCarousel;
|
||||
@ -25,7 +25,7 @@
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 6vh;
|
||||
max-height: 10vh;
|
||||
}
|
||||
|
||||
.referenceImagePreview {
|
||||
|
||||
@ -5,7 +5,6 @@ import { getExtension } from '@/utils/document-util';
|
||||
import DOMPurify from 'dompurify';
|
||||
import { useCallback, useEffect, useMemo } from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
import reactStringReplace from 'react-string-replace';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
@ -19,7 +18,6 @@ import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for
|
||||
|
||||
import { useFetchDocumentThumbnailsByIds } from '@/hooks/use-document-request';
|
||||
import {
|
||||
currentReg,
|
||||
preprocessLaTeX,
|
||||
replaceTextByOldReg,
|
||||
replaceThinkToSection,
|
||||
@ -35,9 +33,15 @@ import {
|
||||
HoverCardContent,
|
||||
HoverCardTrigger,
|
||||
} from '../ui/hover-card';
|
||||
import { ImageCarousel } from './image-carousel';
|
||||
import styles from './index.less';
|
||||
import {
|
||||
groupConsecutiveReferences,
|
||||
shouldShowCarousel,
|
||||
} from './reference-utils';
|
||||
|
||||
const getChunkIndex = (match: string) => Number(match);
|
||||
|
||||
// TODO: The display of the table is inconsistent with the display previously placed in the MessageItem.
|
||||
const MarkdownContent = ({
|
||||
reference,
|
||||
@ -208,51 +212,88 @@ const MarkdownContent = ({
|
||||
|
||||
const renderReference = useCallback(
|
||||
(text: string) => {
|
||||
let replacedText = reactStringReplace(text, currentReg, (match, i) => {
|
||||
const chunkIndex = getChunkIndex(match);
|
||||
const groups = groupConsecutiveReferences(text);
|
||||
const elements = [];
|
||||
let lastIndex = 0;
|
||||
|
||||
const { documentUrl, fileExtension, imageId, chunkItem, documentId } =
|
||||
getReferenceInfo(chunkIndex);
|
||||
groups.forEach((group, groupIndex) => {
|
||||
if (group[0].start > lastIndex) {
|
||||
elements.push(text.substring(lastIndex, group[0].start));
|
||||
}
|
||||
|
||||
const docType = chunkItem?.doc_type;
|
||||
if (shouldShowCarousel(group, reference)) {
|
||||
elements.push(
|
||||
<ImageCarousel
|
||||
key={`carousel-${groupIndex}`}
|
||||
group={group}
|
||||
reference={reference}
|
||||
fileThumbnails={fileThumbnails}
|
||||
onImageClick={handleDocumentButtonClick}
|
||||
/>,
|
||||
);
|
||||
} else {
|
||||
group.forEach((ref) => {
|
||||
const chunkIndex = getChunkIndex(ref.id);
|
||||
const {
|
||||
documentUrl,
|
||||
fileExtension,
|
||||
imageId,
|
||||
chunkItem,
|
||||
documentId,
|
||||
} = getReferenceInfo(chunkIndex);
|
||||
const docType = chunkItem?.doc_type;
|
||||
|
||||
return showImage(docType) ? (
|
||||
<section>
|
||||
<Image
|
||||
id={imageId}
|
||||
className={styles.referenceInnerChunkImage}
|
||||
onClick={
|
||||
documentId
|
||||
? handleDocumentButtonClick(
|
||||
documentId,
|
||||
chunkItem,
|
||||
fileExtension === 'pdf',
|
||||
documentUrl,
|
||||
)
|
||||
: () => {}
|
||||
}
|
||||
></Image>
|
||||
<span className="text-accent-primary"> {imageId}</span>
|
||||
</section>
|
||||
) : (
|
||||
<HoverCard key={i}>
|
||||
<HoverCardTrigger>
|
||||
<CircleAlert className="size-4 inline-block" />
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent className="max-w-3xl">
|
||||
{getPopoverContent(chunkIndex)}
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
);
|
||||
if (showImage(docType)) {
|
||||
elements.push(
|
||||
<section key={ref.id}>
|
||||
<Image
|
||||
id={imageId}
|
||||
className={styles.referenceInnerChunkImage}
|
||||
onClick={
|
||||
documentId
|
||||
? handleDocumentButtonClick(
|
||||
documentId,
|
||||
chunkItem,
|
||||
fileExtension === 'pdf',
|
||||
documentUrl,
|
||||
)
|
||||
: () => {}
|
||||
}
|
||||
/>
|
||||
<span className="text-accent-primary"> {imageId}</span>
|
||||
</section>,
|
||||
);
|
||||
} else {
|
||||
elements.push(
|
||||
<HoverCard key={ref.id}>
|
||||
<HoverCardTrigger>
|
||||
<CircleAlert className="size-4 inline-block" />
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent className="max-w-3xl">
|
||||
{getPopoverContent(chunkIndex)}
|
||||
</HoverCardContent>
|
||||
</HoverCard>,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
lastIndex = group[group.length - 1].end;
|
||||
});
|
||||
|
||||
// replacedText = reactStringReplace(replacedText, curReg, (match, i) => (
|
||||
// <span className={styles.cursor} key={i}></span>
|
||||
// ));
|
||||
if (lastIndex < text.length) {
|
||||
elements.push(text.substring(lastIndex));
|
||||
}
|
||||
|
||||
return replacedText;
|
||||
return elements;
|
||||
},
|
||||
[getPopoverContent, getReferenceInfo, handleDocumentButtonClick],
|
||||
[
|
||||
getPopoverContent,
|
||||
getReferenceInfo,
|
||||
handleDocumentButtonClick,
|
||||
reference,
|
||||
fileThumbnails,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
67
web/src/components/markdown-content/reference-utils.ts
Normal file
67
web/src/components/markdown-content/reference-utils.ts
Normal file
@ -0,0 +1,67 @@
|
||||
import { IReference } from '@/interfaces/database/chat';
|
||||
import { currentReg, showImage } from '@/utils/chat';
|
||||
|
||||
export interface ReferenceMatch {
|
||||
id: string;
|
||||
fullMatch: string;
|
||||
start: number;
|
||||
end: number;
|
||||
}
|
||||
|
||||
export type ReferenceGroup = ReferenceMatch[];
|
||||
|
||||
export const findAllReferenceMatches = (text: string): ReferenceMatch[] => {
|
||||
const matches: ReferenceMatch[] = [];
|
||||
let match;
|
||||
while ((match = currentReg.exec(text)) !== null) {
|
||||
matches.push({
|
||||
id: match[1],
|
||||
fullMatch: match[0],
|
||||
start: match.index,
|
||||
end: match.index + match[0].length,
|
||||
});
|
||||
}
|
||||
return matches;
|
||||
};
|
||||
|
||||
/**
|
||||
* Helper to group consecutive references
|
||||
*/
|
||||
export const groupConsecutiveReferences = (text: string): ReferenceGroup[] => {
|
||||
const matches = findAllReferenceMatches(text);
|
||||
// Construct a two-dimensional array to distinguish whether images are continuous.
|
||||
const groups: ReferenceGroup[] = [];
|
||||
|
||||
if (matches.length === 0) return groups;
|
||||
|
||||
let currentGroup: ReferenceGroup = [matches[0]];
|
||||
// A group with only one element contains non-contiguous images,
|
||||
// while a group with multiple elements contains contiguous images.
|
||||
for (let i = 1; i < matches.length; i++) {
|
||||
// If the end of the previous element equals the start of the current element,
|
||||
// it means that they are consecutive images.
|
||||
if (matches[i].start === currentGroup[currentGroup.length - 1].end) {
|
||||
currentGroup.push(matches[i]);
|
||||
} else {
|
||||
// Save current group and start a new one
|
||||
groups.push(currentGroup);
|
||||
currentGroup = [matches[i]];
|
||||
}
|
||||
}
|
||||
groups.push(currentGroup);
|
||||
|
||||
return groups;
|
||||
};
|
||||
|
||||
export const shouldShowCarousel = (
|
||||
group: ReferenceGroup,
|
||||
reference: IReference,
|
||||
): boolean => {
|
||||
if (group.length < 2) return false; // Need at least 2 images for carousel
|
||||
|
||||
return group.every((ref) => {
|
||||
const chunkIndex = Number(ref.id);
|
||||
const chunk = reference.chunks[chunkIndex];
|
||||
return chunk && showImage(chunk.doc_type);
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user