frontend/src/utils/markdownComponents.jsx

// Default markdown components for chat content
export const getChatMarkdownComponents = () => ({
    p: ({ children }) => <p className="mb-3 text-gray-800 leading-relaxed">{children}</p>,
    h1: ({ children }) => <h1 className="text-xl font-bold mb-3 text-gray-900">{children}</h1>,
    h2: ({ children }) => <h2 className="text-lg font-bold mb-2 text-gray-900">{children}</h2>,
    h3: ({ children }) => <h3 className="text-base font-bold mb-2 text-gray-900">{children}</h3>,
    ul: ({ children }) => <ul className="mb-2 ml-4 list-disc">{children}</ul>,
    ol: ({ children }) => <ol className="mb-2 ml-4 list-decimal">{children}</ol>,
    li: ({ children }) => <li className="mb-1 text-gray-800">{children}</li>,
    hr: () => <hr className="my-4 border-gray-300" />,
    strong: ({ children }) => <strong className="font-semibold text-gray-900">{children}</strong>,
    em: ({ children }) => <em className="italic">{children}</em>,
    code: ({ inline, children }) => 
        inline ? 
        <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">{children}</code> :
        <pre className="bg-gray-100 p-2 rounded overflow-x-auto my-2">
            <code className="text-sm font-mono">{children}</code>
        </pre>,
    blockquote: ({ children }) => (
        <blockquote className="border-l-4 border-blue-200 pl-4 italic text-gray-700 my-2">
            {children}
        </blockquote>
    )
});

// Title-specific markdown components with no bottom margins
export const getTitleMarkdownComponents = () => ({
    p: ({ children }) => <span className="text-gray-900">{children}</span>,
    h1: ({ children }) => <span className="text-xl font-bold text-gray-900">{children}</span>,
    h2: ({ children }) => <span className="text-lg font-bold text-gray-900">{children}</span>,
    h3: ({ children }) => <span className="text-base font-bold text-gray-900">{children}</span>,
    strong: ({ children }) => <strong className="font-semibold text-gray-900">{children}</strong>,
    em: ({ children }) => <em className="italic">{children}</em>,
    code: ({ children }) => <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">{children}</code>,
    // Convert block elements to inline for titles
    ul: ({ children }) => <span>{children}</span>,
    ol: ({ children }) => <span>{children}</span>,
    li: ({ children }) => <span>{children} </span>,
    blockquote: ({ children }) => <span className="italic text-gray-700">{children}</span>
});