diff --git a/__mocks__/rehype-raw.js b/__mocks__/rehype-raw.js
new file mode 100644
index 0000000..74a2d3a
--- /dev/null
+++ b/__mocks__/rehype-raw.js
@@ -0,0 +1,16 @@
+/**
+ * Mock for rehype-raw plugin
+ * 
+ * rehype-raw is an ES module that causes issues with Jest's CommonJS environment.
+ * This mock provides a no-op transformer that passes the syntax tree through unchanged.
+ * 
+ * In tests, we don't need actual HTML parsing since we're testing component behavior,
+ * not the markdown rendering itself.
+ */
+module.exports = function rehypeRaw() {
+  return function transformer(tree) {
+    return tree;
+  };
+};
+
+module.exports.default = module.exports;
diff --git a/__mocks__/remark-gfm.js b/__mocks__/remark-gfm.js
new file mode 100644
index 0000000..a2acd55
--- /dev/null
+++ b/__mocks__/remark-gfm.js
@@ -0,0 +1,16 @@
+/**
+ * Mock for remark-gfm (GitHub Flavored Markdown) plugin
+ * 
+ * remark-gfm is an ES module that causes issues with Jest's CommonJS environment.
+ * This mock provides a no-op transformer that passes the syntax tree through unchanged.
+ * 
+ * In tests, we don't need actual GFM parsing (tables, strikethrough, etc.) since
+ * we're testing component behavior, not markdown rendering.
+ */
+module.exports = function remarkGfm() {
+  return function transformer(tree) {
+    return tree;
+  };
+};
+
+module.exports.default = module.exports;
diff --git a/__mocks__/remark-math.js b/__mocks__/remark-math.js
new file mode 100644
index 0000000..60b4f87
--- /dev/null
+++ b/__mocks__/remark-math.js
@@ -0,0 +1,16 @@
+/**
+ * Mock for remark-math plugin
+ * 
+ * remark-math is an ES module that causes issues with Jest's CommonJS environment.
+ * This mock provides a no-op transformer that passes the syntax tree through unchanged.
+ * 
+ * In tests, we don't need actual LaTeX math parsing since we're testing component
+ * behavior, not mathematical equation rendering.
+ */
+module.exports = function remarkMath() {
+  return function transformer(tree) {
+    return tree;
+  };
+};
+
+module.exports.default = module.exports;
diff --git a/__tests__/components/Chat/ChatMessage.test.tsx b/__tests__/components/Chat/ChatMessage.test.tsx
new file mode 100644
index 0000000..27c76c3
--- /dev/null
+++ b/__tests__/components/Chat/ChatMessage.test.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ChatMessage } from '@/components/Chat/ChatMessage';
+import HomeContext from '@/pages/api/home/home.context';
+import { Message } from '@/types/chat';
+
+// Mock the HtmlFileRenderer to check if it's being rendered
+jest.mock('@/components/Chat/HtmlFileRenderer', () => ({
+  HtmlFileRenderer: jest.fn(() => <div data-testid="html-file-renderer" />),
+}));
+
+// Mock the Avatar component
+jest.mock('@/components/Avatar/BotAvatar', () => ({
+    BotAvatar: jest.fn(() => <div data-testid="bot-avatar" />),
+}));
+
+describe('ChatMessage', () => {
+  const mockHomeContextValue = {
+    state: {
+      selectedConversation: {
+        messages: [],
+      },
+      conversations: [],
+      messageIsStreaming: false,
+    },
+    dispatch: jest.fn(),
+  };
+
+  const renderWithMessage = (message: Message) => {
+    return render(
+      <HomeContext.Provider value={mockHomeContextValue as any}>
+        <ChatMessage message={message} messageIndex={0} />
+      </HomeContext.Provider>
+    );
+  };
+
+  it('should render HtmlFileRenderer for an assistant message with an HTML file link', () => {
+    const message: Message = {
+      id: "1",
+      role: 'assistant',
+      content: 'Here is your plot: <a href="file:///path/to/plot.html">Plot</a>',
+    };
+    renderWithMessage(message);
+
+    expect(screen.getByTestId('html-file-renderer')).toBeInTheDocument();
+  });
+
+  it('should remove the HTML file link from the displayed message content', () => {
+    const message: Message = {
+        id: "1",
+        role: 'assistant',
+        content: 'Here is your plot: <a href="file:///path/to/plot.html">Plot</a>',
+    };
+    renderWithMessage(message);
+
+    // Verify the link is removed but surrounding text is preserved
+    expect(screen.getByText(/Here is your plot/i)).toBeInTheDocument();
+    // The HtmlFileRenderer should be shown instead of the raw link
+    expect(screen.getByTestId('html-file-renderer')).toBeInTheDocument();
+  });
+
+  it('should not render HtmlFileRenderer for a user message, even with a link', () => {
+    const message: Message = {
+        id: "1",
+        role: 'user',
+        content: 'Can you show me a plot from <a href="file:///path/to/plot.html">Plot</a>?',
+    };
+    renderWithMessage(message);
+
+    expect(screen.queryByTestId('html-file-renderer')).not.toBeInTheDocument();
+    // Check that the content is rendered as is for the user message
+    expect(screen.getByText(/Can you show me a plot from/)).toBeInTheDocument();
+  });
+
+  it('should not render HtmlFileRenderer for an assistant message without a link', () => {
+    const message: Message = {
+      id: "1",
+      role: 'assistant',
+      content: 'Hello! How can I help you today?',
+    };
+    renderWithMessage(message);
+
+    expect(screen.queryByTestId('html-file-renderer')).not.toBeInTheDocument();
+    expect(screen.getByText('Hello! How can I help you today?')).toBeInTheDocument();
+  });
+
+  it('should render HtmlFileRenderer for inline HTML content', () => {
+    const message: Message = {
+        id: "1",
+        role: 'assistant',
+        content: 'Here is an inline plot: <html><body><h1>My Plot</h1></body></html>',
+    };
+    renderWithMessage(message);
+
+    expect(screen.getByTestId('html-file-renderer')).toBeInTheDocument();
+    expect(screen.getByText(/Here is an inline plot/i)).toBeInTheDocument();
+  });
+
+  it('should handle multiple HTML files in one message', () => {
+    const message: Message = {
+      id: "1",
+      role: 'assistant',
+      content: 'First: <a href="file:///plot1.html">Plot 1</a> and second: [Plot 2](file:///plot2.html)',
+    };
+    renderWithMessage(message);
+
+    // Should render multiple HtmlFileRenderer components (mocked)
+    const renderers = screen.getAllByTestId('html-file-renderer');
+    expect(renderers.length).toBeGreaterThanOrEqual(2);
+  });
+});
diff --git a/__tests__/components/Chat/HtmlFileRenderer.test.tsx b/__tests__/components/Chat/HtmlFileRenderer.test.tsx
new file mode 100644
index 0000000..3fc9e0f
--- /dev/null
+++ b/__tests__/components/Chat/HtmlFileRenderer.test.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { HtmlFileRenderer } from '@/components/Chat/HtmlFileRenderer';
+
+// Mock fetch
+global.fetch = jest.fn();
+
+// Mock navigator.clipboard
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: jest.fn().mockResolvedValue(undefined),
+  },
+  writable: true,
+});
+
+describe('HtmlFileRenderer', () => {
+  beforeEach(() => {
+    (fetch as jest.Mock).mockClear();
+    (navigator.clipboard.writeText as jest.Mock).mockClear();
+  });
+
+  it('should render loading state initially, then render the plot when file exists', async () => {
+    (fetch as jest.Mock).mockResolvedValueOnce({
+      ok: true, // For checkFileExists
+    });
+    (fetch as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      text: () => Promise.resolve('<html><body><h1>Test Plot</h1></body></html>'), // For loadHtmlContent
+    });
+
+    render(<HtmlFileRenderer filePath="file:///path/to/plot.html" title="My Plot" />);
+
+    // It should initially show a loading skeleton, but that's hard to test without more specific selectors.
+    // We'll wait for the content to appear.
+
+    await waitFor(() => {
+      expect(screen.getByTitle('My Plot')).toBeInTheDocument();
+    });
+
+    const iframe = screen.getByTitle('My Plot');
+    expect(iframe).toHaveAttribute('srcDoc', '<html><body><h1>Test Plot</h1></body></html>');
+  });
+
+  it('should render nothing if the file does not exist', async () => {
+    (fetch as jest.Mock).mockResolvedValue({
+      ok: false,
+      status: 404,
+    });
+
+    const { container } = render(<HtmlFileRenderer filePath="file:///path/to/nonexistent.html" />);
+    
+    await waitFor(() => {
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  it('should display an error message if fetching content fails', async () => {
+    (fetch as jest.Mock).mockResolvedValueOnce({ ok: true }); // file exists check
+    (fetch as jest.Mock).mockRejectedValueOnce(new Error('Network error')); // content fetch fails
+
+    render(<HtmlFileRenderer filePath="file:///path/to/plot.html" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Could not load plot inline/i)).toBeInTheDocument();
+      expect(screen.getByText(/Failed to load HTML file: Network error/i)).toBeInTheDocument();
+    });
+  });
+
+  it('should render inline HTML content directly without fetching', async () => {
+    const inlineContent = '<html><body><h2>Inline Content</h2></body></html>';
+    render(<HtmlFileRenderer filePath="inline-1" isInlineHtml={true} htmlContent={inlineContent} />);
+
+    await waitFor(() => {
+        expect(screen.getByTitle('Inline HTML Content')).toBeInTheDocument();
+    });
+
+    const iframe = screen.getByTitle('Inline HTML Content');
+    expect(iframe).toHaveAttribute('srcDoc', inlineContent);
+    expect(fetch).not.toHaveBeenCalled();
+  });
+
+  it('should toggle the visibility of the plot when show/hide button is clicked', async () => {
+    (fetch as jest.Mock).mockResolvedValue({
+        ok: true,
+        text: () => Promise.resolve('<html></html>'),
+    });
+
+    render(<HtmlFileRenderer filePath="file:///path/to/plot.html" />);
+
+    await waitFor(() => {
+        expect(screen.getByTitle('HTML Content')).toBeInTheDocument();
+    });
+
+    const hideButton = screen.getByRole('button', { name: /Hide Plot/i });
+    fireEvent.click(hideButton);
+
+    await waitFor(() => {
+        expect(screen.queryByTitle('HTML Content')).not.toBeInTheDocument();
+    });
+
+    const showButton = screen.getByRole('button', { name: /Show Plot/i });
+    fireEvent.click(showButton);
+
+    await waitFor(() => {
+        expect(screen.getByTitle('HTML Content')).toBeInTheDocument();
+    });
+  });
+
+  it('should copy file path to clipboard', async () => {
+    (fetch as jest.Mock).mockResolvedValue({ ok: true });
+    window.alert = jest.fn();
+
+    render(<HtmlFileRenderer filePath="file:///path/to/plot.html" />);
+    
+    await waitFor(() => {
+      expect(screen.getByTitle('Copy file path')).toBeInTheDocument();
+    });
+    
+    const copyButton = screen.getByTitle('Copy file path');
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('/path/to/plot.html');
+      expect(window.alert).toHaveBeenCalledWith('File path copied to clipboard! Paste it into your browser address bar to view the plot.');
+    });
+  });
+
+  it('should copy inline html to clipboard', async () => {
+    const inlineContent = '<html><body><h2>Inline Content</h2></body></html>';
+    window.alert = jest.fn();
+
+    render(<HtmlFileRenderer filePath="inline-1" isInlineHtml={true} htmlContent={inlineContent} />);
+    
+    await waitFor(() => {
+      expect(screen.getByTitle('Copy HTML content')).toBeInTheDocument();
+    });
+    
+    const copyButton = screen.getByTitle('Copy HTML content');
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(inlineContent);
+      expect(window.alert).toHaveBeenCalledWith('HTML content copied to clipboard!');
+    });
+  });
+});
diff --git a/__tests__/utils/app/htmlFileDetector.test.ts b/__tests__/utils/app/htmlFileDetector.test.ts
new file mode 100644
index 0000000..1b46581
--- /dev/null
+++ b/__tests__/utils/app/htmlFileDetector.test.ts
@@ -0,0 +1,139 @@
+import { detectHtmlFileLinks, removeHtmlFileLinksFromContent } from '@/utils/app/htmlFileDetector';
+
+describe('htmlFileDetector', () => {
+  describe('detectHtmlFileLinks', () => {
+    describe('basic detection', () => {
+      it('should detect an HTML anchor tag link', () => {
+        const content = '<a href="file:///path/to/plot.html">View Plot</a>';
+        const links = detectHtmlFileLinks(content);
+        expect(links).toHaveLength(1);
+        expect(links[0].filePath).toBe('file:///path/to/plot.html');
+        expect(links[0].linkText).toBe('View Plot');
+        expect(links[0].isInlineHtml).toBe(false);
+      });
+
+      it('should detect a Markdown link', () => {
+        const content = 'Here is the [plot](file:///path/to/plot.html)';
+        const links = detectHtmlFileLinks(content);
+        expect(links).toHaveLength(1);
+        expect(links[0].filePath).toBe('file:///path/to/plot.html');
+        expect(links[0].linkText).toBe('plot');
+      });
+
+      it('should detect a direct file:// URL', () => {
+        const content = 'You can find the plot at file:///path/to/plot.html.';
+        const links = detectHtmlFileLinks(content);
+        expect(links).toHaveLength(1);
+        expect(links[0].filePath).toBe('file:///path/to/plot.html');
+      });
+
+      it('should detect inline HTML content', () => {
+        const content = '<html><head><title>My Plot</title></head><body>...</body></html>';
+        const links = detectHtmlFileLinks(content);
+        expect(links).toHaveLength(1);
+        expect(links[0].isInlineHtml).toBe(true);
+        expect(links[0].htmlContent).toBe(content);
+        expect(links[0].title).toBe('My Plot');
+      });
+    });
+
+    describe('edge cases', () => {
+      it('should handle multiple HTML files in one message', () => {
+        const content = `
+          First: file:///plot1.html
+          Second: /path/to/plot2.html
+          Third: [plot3](file:///plot3.html)
+        `;
+        const links = detectHtmlFileLinks(content);
+        expect(links.length).toBeGreaterThanOrEqual(3);
+        expect(links.filter(l => !l.isInlineHtml)).toHaveLength(3);
+      });
+
+      it('should remove duplicates when same file referenced multiple times', () => {
+        const content = `
+          <a href="file:///path/to/plot.html">View Plot</a>
+          Another link: [plot](file:///path/to/plot.html)
+        `;
+        const links = detectHtmlFileLinks(content);
+        expect(links).toHaveLength(1);
+        expect(links[0].filePath).toBe('file:///path/to/plot.html');
+      });
+
+      it('should handle paths with hyphens and underscores', () => {
+        const content = 'file:///my-awesome_plot-2024.html';
+        const links = detectHtmlFileLinks(content);
+        expect(links).toHaveLength(1);
+        expect(links[0].filePath).toContain('my-awesome_plot-2024.html');
+      });
+
+      it('should not detect http/https links', () => {
+        const content = 'Visit <a href="https://example.com/plot.html">site</a> or http://test.com/page.html';
+        const links = detectHtmlFileLinks(content);
+        expect(links).toHaveLength(0);
+      });
+
+      it('should return empty array for content with no HTML links', () => {
+        const content = 'This is a regular message with no plots.';
+        const links = detectHtmlFileLinks(content);
+        expect(links).toHaveLength(0);
+      });
+    });
+  });
+
+  describe('removeHtmlFileLinksFromContent', () => {
+    it('should remove HTML file links but preserve surrounding text', () => {
+      const content = 'Please <a href="file:///path/to/plot.html">View Plot</a> when you can.';
+      const cleaned = removeHtmlFileLinksFromContent(content);
+      expect(cleaned).toContain('Please');
+      expect(cleaned).toContain('when you can');
+      expect(cleaned).not.toContain('file://');
+      expect(cleaned).not.toContain('<a href');
+    });
+
+    it('should remove Markdown links to HTML files', () => {
+      const content = 'Here is the [plot](file:///path/to/plot.html) for you.';
+      const cleaned = removeHtmlFileLinksFromContent(content);
+      expect(cleaned).toContain('Here is the');
+      expect(cleaned).toContain('for you');
+      expect(cleaned).not.toContain('[plot]');
+      expect(cleaned).not.toContain('file://');
+    });
+
+    it('should remove standalone file:// URLs', () => {
+      const content = 'Find it at file:///path/to/plot.html.';
+      const cleaned = removeHtmlFileLinksFromContent(content);
+      expect(cleaned).toMatch(/Find it at\.?/);
+      expect(cleaned).not.toContain('file://');
+      expect(cleaned).not.toContain('.html');
+    });
+
+    it('should remove inline HTML blocks', () => {
+      const content = 'Here is the plot: <html>...</html>. What do you think?';
+      const cleaned = removeHtmlFileLinksFromContent(content);
+      expect(cleaned).toContain('Here is the plot:');
+      expect(cleaned).toContain('What do you think?');
+      expect(cleaned).not.toContain('<html>');
+    });
+
+    it('should remove all HTML file references from complex content', () => {
+      const content = `
+        <a href="file:///path/to/plot.html">View Plot</a>
+        [plot](file:///path/to/plot.html)
+        file:///path/to/plot.html
+        /path/to/plot.html
+        <html><body>Inline</body></html>
+      `;
+      const cleaned = removeHtmlFileLinksFromContent(content);
+      expect(cleaned).not.toContain('file://');
+      expect(cleaned).not.toContain('.html');
+      expect(cleaned).not.toContain('<html>');
+      expect(cleaned.trim().length).toBeLessThan(10); // Should be mostly empty
+    });
+
+    it('should preserve non-HTML content', () => {
+      const content = 'This is regular text with numbers 123 and symbols @#$';
+      const cleaned = removeHtmlFileLinksFromContent(content);
+      expect(cleaned).toBe(content);
+    });
+  });
+});
diff --git a/components/Chat/ChatMessage.tsx b/components/Chat/ChatMessage.tsx
index dbfd8a5..b32a518 100644
--- a/components/Chat/ChatMessage.tsx
+++ b/components/Chat/ChatMessage.tsx
@@ -33,6 +33,9 @@ import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
+import { HtmlFileRenderer } from './HtmlFileRenderer';
+import { detectHtmlFileLinks, removeHtmlFileLinksFromContent, HtmlFileLink } from '@/utils/app/htmlFileDetector';
+
 export interface Props {
   message: Message;
   messageIndex: number;
@@ -182,6 +185,12 @@ export const ChatMessage: FC<Props> = memo(
       };
     }, []);
 
+    // Detect HTML files in assistant messages
+    const htmlFileLinks: HtmlFileLink[] =
+      message.role === 'assistant'
+        ? detectHtmlFileLinks(message.content)
+        : [];
+
     const prepareContent = ({
       message = {} as Message,
       responseContent = true,
@@ -205,6 +214,32 @@ export const ChatMessage: FC<Props> = memo(
       return fixMalformedHtml(result)?.trim()?.replace(/\n\s+/, '\n ');
     };
 
+    // Prepare content with HTML file links removed to avoid duplicate display
+    const prepareContentWithoutHtmlLinks = ({
+      message = {} as Message,
+      responseContent = true,
+      intermediateStepsContent = false,
+      role = 'assistant',
+    } = {}) => {
+      const { content = '', intermediateSteps = [] } = message;
+
+      if (role === 'user') return content.trim();
+
+      let result = '';
+      if (intermediateStepsContent) {
+        result += generateContentIntermediate(intermediateSteps);
+      }
+
+      if (responseContent) {
+        // Remove HTML file links from content
+        const cleanContent = removeHtmlFileLinksFromContent(content);
+        result += result ? `\n\n${cleanContent}` : cleanContent;
+      }
+
+      // fixing malformed html and removing extra spaces to avoid markdown issues
+      return fixMalformedHtml(result)?.trim()?.replace(/\n\s+/, '\n ');
+    };
+
     return (
       <div
         className={`group md:px-4 ${
@@ -316,7 +351,7 @@ export const ChatMessage: FC<Props> = memo(
                       linkTarget="_blank"
                       components={markdownComponents}
                     >
-                      {prepareContent({
+                      {prepareContentWithoutHtmlLinks({
                         message,
                         role: 'assistant',
                         intermediateStepsContent: true,
@@ -341,7 +376,7 @@ export const ChatMessage: FC<Props> = memo(
                       linkTarget="_blank"
                       components={markdownComponents}
                     >
-                      {prepareContent({
+                      {prepareContentWithoutHtmlLinks({
                         message,
                         role: 'assistant',
                         intermediateStepsContent: false,
@@ -349,6 +384,20 @@ export const ChatMessage: FC<Props> = memo(
                       })}
                     </MemoizedReactMarkdown>
                   </div>
+                  {/* HTML File Renderers */}
+                  {htmlFileLinks.length > 0 && (
+                    <div className="mt-4">
+                      {htmlFileLinks.map((htmlFile, index) => (
+                        <HtmlFileRenderer
+                          key={`${htmlFile.filePath}-${index}`}
+                          filePath={htmlFile.filePath}
+                          title={htmlFile.title}
+                          isInlineHtml={htmlFile.isInlineHtml}
+                          htmlContent={htmlFile.htmlContent}
+                        />
+                      ))}
+                    </div>
+                  )}
                   <div className="mt-1 flex gap-1">
                     {!messageIsStreaming && (
                       <>
diff --git a/components/Chat/HtmlFileRenderer.tsx b/components/Chat/HtmlFileRenderer.tsx
new file mode 100644
index 0000000..744cf00
--- /dev/null
+++ b/components/Chat/HtmlFileRenderer.tsx
@@ -0,0 +1,321 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import { IconEye, IconEyeOff, IconExternalLink, IconFile, IconDownload } from '@tabler/icons-react';
+
+interface HtmlFileRendererProps {
+  filePath: string;
+  title?: string;
+  isInlineHtml?: boolean;
+  htmlContent?: string;
+}
+
+export const HtmlFileRenderer: React.FC<HtmlFileRendererProps> = ({ 
+  filePath, 
+  title,
+  isInlineHtml = false,
+  htmlContent: inlineHtmlContent
+}) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
+  const [htmlContent, setHtmlContent] = useState<string>(inlineHtmlContent || '');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>('');
+  const [fileExists, setFileExists] = useState<boolean | null>(null);
+
+  const cleanFilePath = (path: string): string => {
+    // For inline HTML, return a descriptive name
+    if (isInlineHtml) {
+      return title || 'Inline HTML Content';
+    }
+    
+    // Remove any malformed prefixes or HTML artifacts
+    let cleaned = path.replace(/^.*?href=["']?/, '');
+    cleaned = cleaned.replace(/["'>].*$/, '');
+    
+    // Remove file:// prefix for API call
+    cleaned = cleaned.replace('file://', '');
+    
+    return cleaned;
+  };
+
+  const checkFileExists = async () => {
+    // For inline HTML, file always "exists"
+    if (isInlineHtml && inlineHtmlContent) {
+      setFileExists(true);
+      return;
+    }
+    
+    try {
+      const cleanPath = cleanFilePath(filePath);
+      console.log('Checking if HTML file exists:', cleanPath);
+      
+      // Use a simple GET request to check if file exists
+      // We'll abort quickly to avoid downloading large files
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 3000); // 3 second timeout
+      
+      const response = await fetch(`/api/load-html-file?path=${encodeURIComponent(cleanPath)}`, {
+        signal: controller.signal
+      });
+      
+      clearTimeout(timeoutId);
+      
+      if (response.ok) {
+        setFileExists(true);
+      } else if (response.status === 404) {
+        console.log(`File does not exist: ${cleanPath} (404 Not Found)`);
+        setFileExists(false);
+      } else {
+        console.log(`File check failed: ${cleanPath} (${response.status})`);
+        setFileExists(false);
+      }
+    } catch (err: any) {
+      // If it's an abort error, still check - might just be slow
+      if (err.name === 'AbortError') {
+        console.log(`File check timed out, assuming file exists: ${filePath}`);
+        setFileExists(true);
+      } else {
+        console.log(`Error checking file existence: ${err.message}`);
+        setFileExists(false);
+      }
+    }
+  };
+
+  const loadHtmlContent = async () => {
+    // If it's inline HTML, content is already provided
+    if (isInlineHtml && inlineHtmlContent) {
+      setHtmlContent(inlineHtmlContent);
+      return;
+    }
+    
+    if (isExpanded && !htmlContent && !error && fileExists) {
+      setIsLoading(true);
+      setError('');
+      
+      try {
+        const cleanPath = cleanFilePath(filePath);
+        console.log('Loading HTML file via API:', cleanPath);
+        
+        const response = await fetch(`/api/load-html-file?path=${encodeURIComponent(cleanPath)}`);
+        
+        if (!response.ok) {
+          throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
+        }
+        
+        const content = await response.text();
+        setHtmlContent(content);
+      } catch (err: any) {
+        console.error('Error loading HTML file:', err);
+        setError(`Failed to load HTML file: ${err.message}`);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    // First check if file exists
+    checkFileExists();
+  }, [filePath, isInlineHtml, inlineHtmlContent]);
+
+  useEffect(() => {
+    // Only load content if file exists and component is expanded
+    if (isExpanded && fileExists) {
+      loadHtmlContent();
+    }
+  }, [isExpanded, fileExists]);
+
+  // Don't render the component if file doesn't exist
+  if (fileExists === false) {
+    return null;
+  }
+
+  // Show loading state while checking file existence
+  if (fileExists === null) {
+    return (
+      <div className="my-4 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <div className="bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 px-4 py-3">
+          <div className="flex items-center gap-3">
+            <IconFile size={20} className="text-green-600 dark:text-green-400" />
+            <div className="animate-pulse">
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-32 mb-2"></div>
+              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-48"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const openInSystemBrowser = () => {
+    if (isInlineHtml) {
+      // For inline HTML, create a blob URL and try to open it
+      try {
+        const blob = new Blob([inlineHtmlContent || ''], { type: 'text/html' });
+        const url = URL.createObjectURL(blob);
+        window.open(url, '_blank');
+        // Clean up the URL after a delay
+        setTimeout(() => URL.revokeObjectURL(url), 10000);
+      } catch (error) {
+        console.error('Error opening inline HTML:', error);
+        alert('Unable to open inline HTML content in new window.');
+      }
+      return;
+    }
+    
+    const cleanPath = cleanFilePath(filePath);
+    // Try to open in system file manager/browser
+    try {
+      // For desktop apps or Electron, this might work
+      if ((window as any).electronAPI) {
+        (window as any).electronAPI.openFile(cleanPath);
+      } else {
+        // Provide instructions to user
+        alert(`To view this plot, please open the following file in your browser:\n\n${cleanPath}\n\nYou can copy this path and paste it into your browser's address bar.`);
+      }
+    } catch (error) {
+      console.error('Error opening file:', error);
+      alert(`To view this plot, please open the following file in your browser:\n\n${cleanPath}`);
+    }
+  };
+
+  const copyPathToClipboard = async () => {
+    try {
+      if (isInlineHtml) {
+        // For inline HTML, copy the HTML content itself
+        await navigator.clipboard.writeText(inlineHtmlContent || '');
+        alert('HTML content copied to clipboard!');
+      } else {
+        const cleanPath = cleanFilePath(filePath);
+        await navigator.clipboard.writeText(cleanPath);
+        alert('File path copied to clipboard! Paste it into your browser address bar to view the plot.');
+      }
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+      if (isInlineHtml) {
+        alert('Failed to copy HTML content to clipboard.');
+      } else {
+        const cleanPath = cleanFilePath(filePath);
+        alert(`Copy this path to your browser:\n\n${cleanPath}`);
+      }
+    }
+  };
+
+  const displayPath = cleanFilePath(filePath);
+
+  return (
+    <div className="my-4 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+      {/* Header */}
+      <div className="bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 px-4 py-3 flex justify-between items-center">
+        <div className="flex items-center gap-3">
+          <IconFile size={20} className="text-green-600 dark:text-green-400" />
+          <div>
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              {title || (isInlineHtml ? 'Inline HTML Content' : 'Interactive Plot')}
+            </span>
+            <div className="flex items-center gap-2 mt-1">
+              <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
+                {isInlineHtml ? 'Inline HTML' : 'HTML Plot'}
+              </span>
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                {isInlineHtml ? 'HTML response content' : 'Interactive visualization'}
+              </span>
+            </div>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="flex items-center gap-2 px-4 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors shadow-sm"
+          >
+            {isExpanded ? <IconEyeOff size={16} /> : <IconEye size={16} />}
+            {isExpanded ? 'Hide' : 'Show'} {isInlineHtml ? 'Content' : 'Plot'}
+          </button>
+          
+          <button
+            onClick={copyPathToClipboard}
+            className="flex items-center gap-1 px-3 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
+            title={isInlineHtml ? "Copy HTML content" : "Copy file path"}
+          >
+            <IconDownload size={16} />
+          </button>
+          
+          {!isInlineHtml && (
+            <button
+              onClick={openInSystemBrowser}
+              className="flex items-center gap-1 px-3 py-2 text-sm bg-gray-600 hover:bg-gray-700 text-white rounded-md transition-colors"
+              title="Open instructions"
+            >
+              <IconExternalLink size={16} />
+            </button>
+          )}
+          
+          {isInlineHtml && (
+            <button
+              onClick={openInSystemBrowser}
+              className="flex items-center gap-1 px-3 py-2 text-sm bg-gray-600 hover:bg-gray-700 text-white rounded-md transition-colors"
+              title="Open in new window"
+            >
+              <IconExternalLink size={16} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      {isExpanded && (
+        <div className="p-4">
+          {isLoading && (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600"></div>
+              <span className="ml-2 text-gray-600 dark:text-gray-400">Loading {isInlineHtml ? 'content' : 'plot'}...</span>
+            </div>
+          )}
+          
+          {error && !isInlineHtml && (
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-4">
+              <p className="text-red-700 dark:text-red-400 text-sm font-medium mb-2">Could not load plot inline</p>
+              <p className="text-red-600 dark:text-red-500 text-sm mb-3">{error}</p>
+              <div className="space-y-2">
+                <p className="text-sm text-gray-700 dark:text-gray-300">
+                  <strong>To view this plot:</strong>
+                </p>
+                <ol className="text-sm text-gray-600 dark:text-gray-400 list-decimal list-inside space-y-1">
+                  <li>Click the copy button above to copy the file path</li>
+                  <li>Open a new browser tab</li>
+                  <li>Paste the path into the address bar</li>
+                  <li>Press Enter to view the interactive plot</li>
+                </ol>
+                <button
+                  onClick={copyPathToClipboard}
+                  className="mt-3 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-md transition-colors"
+                >
+                  📋 Copy File Path
+                </button>
+              </div>
+            </div>
+          )}
+          
+          {htmlContent && !error && (
+            <div className="border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden">
+              <iframe
+                srcDoc={htmlContent}
+                className="w-full border-0"
+                sandbox="allow-scripts allow-same-origin"
+                title={title || (isInlineHtml ? 'Inline HTML Content' : 'HTML Content')}
+                style={{ height: '600px', minHeight: '500px' }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* File path info */}
+      <div className="bg-gray-50 dark:bg-gray-800/50 px-4 py-2 border-t border-gray-200 dark:border-gray-700">
+        <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+          {isInlineHtml ? 'Inline HTML Content' : displayPath}
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/jest.config.js b/jest.config.js
index 355c15c..f952d62 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,9 +18,12 @@ const customJestConfig = {
     '^@/constants/(.*)$': '<rootDir>/constants/$1',
     '^react-markdown$': '<rootDir>/__mocks__/react-markdown.js',
     '^next-i18next$': '<rootDir>/__mocks__/next-i18next.js',
+    '^rehype-raw$': '<rootDir>/__mocks__/rehype-raw.js',
+    '^remark-gfm$': '<rootDir>/__mocks__/remark-gfm.js',
+    '^remark-math$': '<rootDir>/__mocks__/remark-math.js',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(react-markdown|remark-.*|rehype-.*|unified|vfile.*|micromark.*|mdast-.*|hast-.*|next-i18next|react-i18next)/)'
+    'node_modules/(?!(react-markdown|remark-.*|rehype-.*|unified|vfile.*|micromark.*|mdast-.*|hast-.*|unist-.*|bail|is-plain-obj|trough|property-information|space-separated-tokens|comma-separated-tokens|web-namespaces|next-i18next|react-i18next)/)'
   ],
   testMatch: [
     '**/__tests__/**/*.(ts|tsx|js)',
diff --git a/pages/api/load-html-file.ts b/pages/api/load-html-file.ts
new file mode 100644
index 0000000..b180968
--- /dev/null
+++ b/pages/api/load-html-file.ts
@@ -0,0 +1,59 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+import path from 'path';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== 'GET') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  const { path: filePath } = req.query;
+
+  if (!filePath || typeof filePath !== 'string') {
+    return res.status(400).json({ error: 'File path is required' });
+  }
+
+  try {
+    // Security check: only allow HTML files
+    if (!filePath.endsWith('.html')) {
+      return res.status(400).json({ error: 'Only HTML files are allowed' });
+    }
+
+    // Security check: prevent directory traversal attacks
+    const resolvedPath = path.resolve(filePath);
+    const workspaceRoot = process.cwd();
+    
+    // Check if the file is within the workspace or in expected output directories
+    const isInWorkspace = resolvedPath.startsWith(workspaceRoot) || 
+                         resolvedPath.includes('/output_data/') ||
+                         resolvedPath.includes('/plots/');
+    
+    if (!isInWorkspace) {
+      return res.status(403).json({ error: 'Access to this file path is not allowed' });
+    }
+
+    // Check if file exists
+    if (!fs.existsSync(resolvedPath)) {
+      return res.status(404).json({ error: 'File not found' });
+    }
+
+    // Read the HTML file
+    const htmlContent = fs.readFileSync(resolvedPath, 'utf-8');
+
+    // Set appropriate headers
+    res.setHeader('Content-Type', 'text/html');
+    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+    
+    return res.status(200).send(htmlContent);
+
+  } catch (error: any) {
+    console.error('Error loading HTML file:', error);
+    return res.status(500).json({ 
+      error: 'Failed to load HTML file',
+      details: error.message 
+    });
+  }
+} 
\ No newline at end of file
diff --git a/utils/app/htmlFileDetector.ts b/utils/app/htmlFileDetector.ts
new file mode 100644
index 0000000..bcc2b16
--- /dev/null
+++ b/utils/app/htmlFileDetector.ts
@@ -0,0 +1,261 @@
+export interface HtmlFileLink {
+  filePath: string;
+  linkText: string;
+  title?: string;
+  isInlineHtml?: boolean;
+  htmlContent?: string;
+}
+
+interface ProcessedRange {
+  start: number;
+  end: number;
+}
+
+type PatternHandler = (match: RegExpExecArray) => { filePath: string; linkText: string } | null;
+
+/**
+ * Detect HTML file links in message content
+ * Supports various formats: anchor tags, markdown links, file:// URLs, paths, and inline HTML
+ */
+export function detectHtmlFileLinks(content: string): HtmlFileLink[] {
+  const htmlFileLinks: HtmlFileLink[] = [];
+  const processedRanges: ProcessedRange[] = [];
+
+  // First, detect inline HTML content blocks
+  detectInlineHtml(content, htmlFileLinks, processedRanges);
+
+  // Then detect various file link formats
+  detectFileLinkPatterns(content, htmlFileLinks, processedRanges);
+
+  // Remove duplicates based on filePath
+  return removeDuplicateLinks(htmlFileLinks);
+}
+
+/**
+ * Detect inline HTML content blocks and add them to the results
+ */
+function detectInlineHtml(
+  content: string,
+  htmlFileLinks: HtmlFileLink[],
+  processedRanges: ProcessedRange[]
+): void {
+  const inlineHtmlRegex = /<html[^>]*>[\s\S]*?<\/html>/gi;
+  let match;
+  let count = 1;
+
+  while ((match = inlineHtmlRegex.exec(content)) !== null) {
+    const htmlContent = match[0];
+    processedRanges.push({ start: match.index, end: match.index + htmlContent.length });
+
+    const title = extractHtmlTitle(htmlContent, count);
+
+    htmlFileLinks.push({
+      filePath: `inline-html-${count}`,
+      linkText: title,
+      title: title,
+      isInlineHtml: true,
+      htmlContent: htmlContent,
+    });
+
+    count++;
+  }
+}
+
+/**
+ * Extract title from HTML content
+ */
+function extractHtmlTitle(htmlContent: string, fallbackCount: number): string {
+  const titleMatch =
+    htmlContent.match(/<title[^>]*>([^<]+)<\/title>/i) || htmlContent.match(/<h1[^>]*>([^<]+)<\/h1>/i);
+  return titleMatch ? titleMatch[1].trim() : `Inline HTML Content ${fallbackCount}`;
+}
+
+/**
+ * Detect various file link patterns (anchor tags, markdown, file:// URLs, etc.)
+ */
+function detectFileLinkPatterns(
+  content: string,
+  htmlFileLinks: HtmlFileLink[],
+  processedRanges: ProcessedRange[]
+): void {
+  const patterns = getFileLinkPatterns();
+
+  patterns.forEach(({ regex, handler }) => {
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+      // Skip if this match overlaps with already processed content
+      if (isInProcessedRange(match.index, match[0].length, processedRanges)) {
+        continue;
+      }
+
+      const result = handler(match);
+      if (!result) {
+        continue;
+      }
+
+      const { filePath, linkText } = result;
+
+      // Mark this range as processed
+      processedRanges.push({ start: match.index, end: match.index + match[0].length });
+
+      htmlFileLinks.push({
+        filePath: filePath,
+        linkText: linkText.trim(),
+        title: extractTitleFromPath(filePath),
+        isInlineHtml: false,
+      });
+    }
+  });
+}
+
+/**
+ * Define regex patterns and handlers for different file link formats
+ */
+function getFileLinkPatterns(): Array<{ regex: RegExp; handler: PatternHandler }> {
+  return [
+    // HTML anchor tags with file:// URLs
+    {
+      regex: /<a\s+href=["']?(file:\/\/[^"'\s>]+\.html)["']?[^>]*>([^<]+)<\/a>/gi,
+      handler: (match) => ({ filePath: match[1], linkText: match[2] }),
+    },
+    // HTML anchor tags with http/https - SKIP these
+    {
+      regex: /<a\s+href=["']?(https?:\/\/[^"'\s>]+\.html)["']?[^>]*>([^<]+)<\/a>/gi,
+      handler: () => null,
+    },
+    // Markdown links: [text](file://path)
+    {
+      regex: /\[([^\]]+)\]\((file:\/\/[^)]+\.html)\)/g,
+      handler: (match) => ({ linkText: match[1], filePath: match[2] }),
+    },
+    // File paths in backticks
+    {
+      regex: /`([^`]+\.html)`/g,
+      handler: (match) => createFilePathResult(match[1]),
+    },
+    // File paths in double quotes
+    {
+      regex: /"([^"]+\.html)"/g,
+      handler: (match) => createFilePathResult(match[1]),
+    },
+    // File paths in single quotes
+    {
+      regex: /'([^']+\.html)'/g,
+      handler: (match) => createFilePathResult(match[1]),
+    },
+    // Direct file:// URLs (not in markdown or HTML tags, not containing http/https)
+    {
+      regex: /(?<!\(|href=["'])(file:\/\/[^\s"'<>`\)]+\.html)(?!["']\s*>|\))/g,
+      handler: (match) => {
+        const path = match[1] || match[0];
+        if (path.includes('http://') || path.includes('https://')) {
+          return null;
+        }
+        return { filePath: path, linkText: extractFilenameFromPath(path) };
+      },
+    },
+    // Plain file paths (absolute paths starting with /)
+    {
+      regex: /\s(\/[\w\/\-\.]+\.html)\b/g,
+      handler: (match) => ({
+        filePath: `file://${match[1]}`,
+        linkText: extractFilenameFromPath(match[1]),
+      }),
+    },
+  ];
+}
+
+/**
+ * Create result for a file path, handling http/https filtering
+ */
+function createFilePathResult(path: string): { filePath: string; linkText: string } | null {
+  if (path.startsWith('http://') || path.startsWith('https://')) {
+    return null;
+  }
+  return {
+    filePath: path.startsWith('file://') ? path : `file://${path}`,
+    linkText: extractFilenameFromPath(path),
+  };
+}
+
+/**
+ * Check if a match overlaps with already processed ranges
+ */
+function isInProcessedRange(index: number, length: number, processedRanges: ProcessedRange[]): boolean {
+  const matchStart = index;
+  const matchEnd = index + length;
+  return processedRanges.some(
+    (range) =>
+      (matchStart >= range.start && matchStart < range.end) ||
+      (matchEnd > range.start && matchEnd <= range.end) ||
+      (matchStart <= range.start && matchEnd >= range.end)
+  );
+}
+
+/**
+ * Remove duplicate links based on filePath
+ */
+function removeDuplicateLinks(links: HtmlFileLink[]): HtmlFileLink[] {
+  return links.filter((link, index, self) => index === self.findIndex((l) => l.filePath === link.filePath));
+}
+
+/**
+ * Extract a readable title from the file path
+ */
+function extractTitleFromPath(filePath: string): string {
+  const filename = extractFilenameFromPath(filePath);
+
+  // Convert underscores/hyphens to spaces and capitalize
+  return filename
+    .replace(/\.html$/, '')
+    .replace(/[_-]/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+/**
+ * Extract filename from file path
+ */
+function extractFilenameFromPath(filePath: string): string {
+  const cleanPath = filePath.replace('file://', '');
+  return cleanPath.split('/').pop() || cleanPath;
+}
+
+/**
+ * Remove HTML file links from content to avoid duplicate display
+ * This is used to clean the message content before displaying it alongside HtmlFileRenderer
+ */
+export function removeHtmlFileLinksFromContent(content: string): string {
+  let cleanContent = content;
+
+  // Remove HTML anchor tags to HTML files
+  cleanContent = cleanContent.replace(
+    /<a\s+href=["']?(file:\/\/[^"'\s>]+\.html)["']?[^>]*>([^<]+)<\/a>/gi,
+    ''
+  );
+
+  // Remove HTML img tags that reference HTML files
+  cleanContent = cleanContent.replace(/<img\s+[^>]*src=["']?(file:\/\/[^"'\s>]+\.html)["']?[^>]*\/?>/gi, '');
+
+  // Remove any complete HTML blocks
+  cleanContent = cleanContent.replace(/<html[^>]*>[\s\S]*?<\/html>/gi, '');
+
+  // Remove markdown links to HTML files
+  cleanContent = cleanContent.replace(/\[([^\]]+)\]\((file:\/\/[^)]+\.html)\)/g, '');
+
+  // Remove standalone file:// URLs
+  cleanContent = cleanContent.replace(/\s(file:\/\/[^\s"'<>`\)]+\.html)\s*(?=[.,!?;:\n]|$)/g, '');
+  cleanContent = cleanContent.replace(/^(file:\/\/[^\s"'<>`\)]+\.html)\s*(?=[.,!?;:\n]|$)/gm, '');
+
+  // Remove file paths in various quote styles
+  cleanContent = cleanContent.replace(/`([^`]+\.html)`/g, '');
+  cleanContent = cleanContent.replace(/"([^"]+\.html)"/g, '');
+  cleanContent = cleanContent.replace(/'([^']+\.html)'/g, '');
+
+  // Remove plain file paths
+  cleanContent = cleanContent.replace(/\s(\/[\w\/\-\.]+\.html)\s*(?=[.,!?;:\n]|$)/g, '');
+
+  // Clean up extra newlines
+  cleanContent = cleanContent.replace(/\n\s*\n\s*\n+/g, '\n\n');
+
+  return cleanContent.trim();
+}
\ No newline at end of file