Feat: Images referenced in chat messages are displayed as a carousel at the bottom of the message. #12076 (#12207)

### What problem does this PR solve?
Feat: Images referenced in chat messages are displayed as a carousel at
the bottom of the message. #12076

### Type of change


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

web/src/components/image/index.tsx

@@ -6,17 +6,30 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 interface IImage extends React.ImgHTMLAttributes<HTMLImageElement> {
   id: string;
   t?: string | number;
+  label?: string;
 }
 
-const Image = ({ id, t, className, ...props }: IImage) => {
-  return (
+const Image = ({ id, t, label, className, ...props }: IImage) => {
+  const imageElement = (
     <img
       {...props}
       src={`${api_host}/document/image/${id}${t ? `?_t=${t}` : ''}`}
-      alt=""
       className={classNames('max-w-[45vw] max-h-[40wh] block', className)}
     />
   );
+
+  if (!label) {
+    return imageElement;
+  }
+
+  return (
+    <div className="relative inline-block w-full">
+      {imageElement}
+      <div className="absolute bottom-2 right-2 bg-accent-primary text-white px-2 py-0.5 rounded-xl text-xs font-normal backdrop-blur-sm">
+        {label}
+      </div>
+    </div>
+  );
 };
 
 export default Image;