Enforce max image size for markdown

src/web/nextui/src/app/components/CustomImage.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+import React from 'react';
+
+interface CustomImageProps {
+  src: string;
+  alt: string;
+  title?: string;
+}
+
+const CustomImage: React.FC<CustomImageProps> = ({ src, alt, title }) => {
+  const width = 400;
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      title={title}
+      width={width}
+      style={{ maxWidth: '100%', height: 'auto' }} // Ensure responsiveness
+    />
+  );
+};
+
+export default CustomImage;

src/web/nextui/src/app/components/MarkdownRenderer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import CustomImage from './CustomImage';
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content }) => {
+  return (
+    <ReactMarkdown
+      components={{
+        img: ({ node, ...props }) => (
+          <CustomImage src={props.src || ''} alt={props.alt || ''} {...props} />
+        ),
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+};
+
+export default MarkdownRenderer;

src/web/nextui/src/app/eval/ResultsTable.tsx

@@ -3,7 +3,7 @@ import { diffSentences, diffJson, diffWords } from 'diff';
 
 import './index.css';
 
-import ReactMarkdown from 'react-markdown';
+import MarkdownRenderer from '@/app/components/MarkdownRenderer';
 import invariant from 'tiny-invariant';
 import {
   createColumnHelper,
@@ -299,7 +299,7 @@ function EvalOutputCell({
       console.error('Invalid regular expression:', (error as Error).message);
     }
   } else if (renderMarkdown) {
-    node = <ReactMarkdown>{text}</ReactMarkdown>;
+    node = <MarkdownRenderer content={text} />
   } else if (prettifyJson) {
     try {
       node = <pre>{JSON.stringify(JSON.parse(text), null, 2)}</pre>;
@@ -749,7 +749,7 @@ function ResultsTable({
                 return (
                   <div className="cell">
                     {renderMarkdown ? (
-                      <ReactMarkdown>{value}</ReactMarkdown>
+                      <MarkdownRenderer content={value} />
                     ) : (
                       <MemoizedTruncatedText text={value} maxLength={maxTextLength} />
                     )}