Feat: An image carousel is displayed at the bottom of the agent's chat messages. #12076 (#12215)

### What problem does this PR solve?

Feat: An image carousel is displayed at the bottom of the agent's chat
messages. #12076

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-search/markdown-content/index.tsx

@@ -2,9 +2,8 @@ import Image from '@/components/image';
 import SvgIcon from '@/components/svg-icon';
 import { IReference, IReferenceChunk } from '@/interfaces/database/chat';
 import { getExtension } from '@/utils/document-util';
-import { InfoCircleOutlined } from '@ant-design/icons';
 import DOMPurify from 'dompurify';
-import React, { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 import Markdown from 'react-markdown';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import rehypeKatex from 'rehype-katex';
@@ -17,17 +16,11 @@ import { useTranslation } from 'react-i18next';
 
 import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
 
-import ImageCarousel from '@/components/markdown-content/image-carousel';
-import {
-  groupConsecutiveReferences,
-  shouldShowCarousel,
-  type ReferenceGroup,
-} from '@/components/markdown-content/reference-utils';
 import {
+  currentReg,
   preprocessLaTeX,
   replaceTextByOldReg,
   replaceThinkToSection,
-  showImage,
 } from '@/utils/chat';
 
 import { Button } from '@/components/ui/button';
@@ -40,6 +33,7 @@ import { useFetchDocumentThumbnailsByIds } from '@/hooks/use-document-request';
 import classNames from 'classnames';
 import { omit } from 'lodash';
 import { pipe } from 'lodash/fp';
+import reactStringReplace from 'react-string-replace';
 
 // Defining Tailwind CSS class name constants
 const styles = {
@@ -52,6 +46,8 @@ const styles = {
   fileThumbnail: 'inline-block max-w-[40px]',
 };
 
+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,
@@ -192,7 +188,10 @@ const MarkdownContent = ({
                 )}
                 <Button
                   variant="link"
-                  className={classNames(styles.documentLink, 'text-wrap')}
+                  className={classNames(
+                    styles.documentLink,
+                    'text-wrap flex-1 h-auto',
+                  )}
                   onClick={handleDocumentButtonClick(
                     documentId,
                     chunkItem,
@@ -213,83 +212,26 @@ const MarkdownContent = ({
 
   const renderReference = useCallback(
     (text: string) => {
-      const groups = groupConsecutiveReferences(text);
-      const elements: React.ReactNode[] = [];
-      let lastIndex = 0;
+      let replacedText = reactStringReplace(text, currentReg, (match) => {
+        const chunkIndex = getChunkIndex(match);
 
-      groups.forEach((group: ReferenceGroup) => {
-        // Add text before the group
-        if (group[0].start > lastIndex) {
-          elements.push(text.slice(lastIndex, group[0].start));
-        }
-
-        // Determine if this group should be a carousel
-        if (shouldShowCarousel(group, reference)) {
-          // Render carousel for consecutive image group
-          elements.push(
-            <ImageCarousel
-              key={`carousel-${group[0].id}`}
-              group={group}
-              reference={reference}
-              fileThumbnails={fileThumbnails}
-              onImageClick={handleDocumentButtonClick}
-            />,
-          );
-        } else {
-          // Render individual references in the group
-          group.forEach((ref) => {
-            const chunkIndex = Number(ref.id);
-            const { imageId, chunkItem, documentId } =
-              getReferenceInfo(chunkIndex);
-            const docType = chunkItem?.doc_type;
-
-            if (showImage(docType)) {
-              elements.push(
-                <Image
-                  key={ref.id}
-                  id={imageId}
-                  className={styles.referenceInnerChunkImage}
-                  onClick={
-                    documentId
-                      ? handleDocumentButtonClick(documentId, chunkItem)
-                      : () => {}
-                  }
-                />,
-              );
-            } else {
-              elements.push(
-                <Popover key={ref.id}>
-                  <PopoverTrigger>
-                    <InfoCircleOutlined className={styles.referenceIcon} />
-                  </PopoverTrigger>
-                  <PopoverContent className="!w-fit">
-                    {getPopoverContent(chunkIndex)}
-                  </PopoverContent>
-                </Popover>,
-              );
-            }
-            // Add the original reference text
-            elements.push(ref.fullMatch);
-          });
-        }
-
-        lastIndex = group[group.length - 1].end;
+        return (
+          <Popover>
+            <PopoverTrigger>
+              <span className="text-text-secondary bg-bg-card rounded-2xl px-1 mx-1 text-nowrap">
+                Fig. {chunkIndex + 1}
+              </span>
+            </PopoverTrigger>
+            <PopoverContent className="!w-fit">
+              {getPopoverContent(chunkIndex)}
+            </PopoverContent>
+          </Popover>
+        );
       });
 
-      // Add any remaining text after the last group
-      if (lastIndex < text.length) {
-        elements.push(text.slice(lastIndex));
-      }
-
-      return elements;
+      return replacedText;
     },
-    [
-      reference,
-      fileThumbnails,
-      handleDocumentButtonClick,
-      getReferenceInfo,
-      getPopoverContent,
-    ],
+    [getPopoverContent],
   );
 
   return (
@@ -300,11 +242,7 @@ const MarkdownContent = ({
       components={
         {
           'custom-typography': ({ children }: { children: string }) =>
-            Array.isArray(renderReference(children))
-              ? renderReference(children).map((element, index) => (
-                  <React.Fragment key={index}>{element}</React.Fragment>
-                ))
-              : renderReference(children),
+            renderReference(children),
           code(props: any) {
             const { children, className, ...rest } = props;
             const restProps = omit(rest, 'node');