frontend/src/Components/AiComponents/ChatComponents/Streaming.js

import React, { useEffect, useRef } from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import './Streaming.css';

// Streaming component for rendering markdown content
const Streaming = ({ content, isStreaming, onContentRef }) => {
  const contentRef = useRef(null);
  
  useEffect(() => {
    if (contentRef.current && onContentRef) {
      onContentRef(contentRef.current);
    }
  }, [content, onContentRef]);

  const displayContent = isStreaming ? `${content}▌` : (content || '');

  return (
    <div className="streaming-content" ref={contentRef}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeRaw]}
        components={{
          code({node, inline, className, children, ...props}) {
            const match = /language-(\w+)/.exec(className || '');
            return !inline ? (
              <div className="code-block-container">
                <div className="code-block-header">
                  <span>{match ? match[1] : 'code'}</span>
                </div>
                <SyntaxHighlighter
                  style={atomDark}
                  language={match ? match[1] : 'text'}
                  PreTag="div"
                  {...props}
                >
                  {String(children).replace(/\n$/, '')}
                </SyntaxHighlighter>
              </div>
            ) : (
              <code className={className} {...props}>
                {children}
              </code>
            );
          },
          table({node, ...props}) {
            return (
              <div className="table-container">
                <table {...props} />
              </div>
            );
          },
          a({node, children, href, ...props}) {
            return (
              <a 
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                className="markdown-link"
                {...props}
              >
                {children}
              </a>
            );
          },
          blockquote({node, ...props}) {
            return (
              <blockquote className="markdown-blockquote" {...props} />
            );
          }
        }}
      >
        {displayContent}
      </ReactMarkdown>
    </div>
  );
};

export default Streaming;