legal-ai/web-ui/src/components/ui/markdown.tsx

"use client";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

/*
 * Tiny markdown renderer for Hebrew prose blocks — paragraphs, lists,
 * emphasis, and GFM tables (the main reason this exists). The parsed
 * research_md fields and the conclusions field both contain tables
 * like "ציר דיוני" that we want to render as real <table>s, RTL, with
 * auto-sized columns that line up row-to-row.
 *
 * Table styling uses `table-auto` + `whitespace-nowrap` on header cells
 * so the column widths are dictated by the longest cell in that column,
 * and every row's borders align exactly underneath each other. The
 * overflow-x-auto wrapper catches extremely wide tables on narrow
 * viewports without letting the parent card grow.
 */

export function Markdown({ content }: { content: string }) {
  return (
    <div className="prose-md text-sm text-ink-soft leading-relaxed" dir="rtl">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          p: ({ node: _n, ...props }) => (
            <p className="mb-2 last:mb-0 text-justify" {...props} />
          ),
          strong: ({ node: _n, ...props }) => (
            <strong className="text-navy font-semibold" {...props} />
          ),
          em: ({ node: _n, ...props }) => (
            <em className="text-ink" {...props} />
          ),
          a: ({ node: _n, ...props }) => (
            <a
              className="text-gold-deep hover:text-gold underline underline-offset-2"
              target="_blank"
              rel="noreferrer"
              {...props}
            />
          ),
          ul: ({ node: _n, ...props }) => (
            <ul className="list-disc ps-5 mb-2 space-y-1" {...props} />
          ),
          ol: ({ node: _n, ...props }) => (
            <ol className="list-decimal ps-5 mb-2 space-y-1" {...props} />
          ),
          li: ({ node: _n, ...props }) => (
            <li className="text-ink" {...props} />
          ),
          h1: ({ node: _n, ...props }) => (
            <h3 className="text-navy text-base font-semibold mt-3 mb-1" {...props} />
          ),
          h2: ({ node: _n, ...props }) => (
            <h4 className="text-navy text-sm font-semibold mt-3 mb-1" {...props} />
          ),
          h3: ({ node: _n, ...props }) => (
            <h5 className="text-navy text-sm font-semibold mt-2 mb-1" {...props} />
          ),
          blockquote: ({ node: _n, ...props }) => (
            <blockquote
              className="border-e-2 border-gold-soft pe-3 text-ink italic my-2"
              {...props}
            />
          ),
          code: ({ node: _n, ...props }) => (
            <code
              className="rounded bg-rule-soft px-1 py-0.5 font-mono text-[0.78rem] text-ink"
              {...props}
            />
          ),
          /* ── Tables ─────────────────────────────────────────────────
             Wrapped in an overflow-x-auto so very wide tables don't push
             the parent card out of its track. table-auto lets the browser
             size columns by their longest cell (that's what keeps borders
             aligned row-to-row) and whitespace-nowrap on the headers
             ensures the header row sets column widths instead of
             breaking mid-word. */
          table: ({ node: _n, ...props }) => (
            <div className="my-3 -mx-1 overflow-x-auto">
              <table
                className="w-full table-auto border-collapse border border-rule text-sm text-right"
                {...props}
              />
            </div>
          ),
          thead: ({ node: _n, ...props }) => (
            <thead className="bg-rule-soft/70" {...props} />
          ),
          tbody: ({ node: _n, ...props }) => <tbody {...props} />,
          tr: ({ node: _n, ...props }) => (
            <tr className="border-b border-rule last:border-b-0" {...props} />
          ),
          th: ({ node: _n, ...props }) => (
            <th
              className="border border-rule px-3 py-2 text-right text-navy font-semibold whitespace-nowrap align-top"
              {...props}
            />
          ),
          td: ({ node: _n, ...props }) => (
            <td
              className="border border-rule px-3 py-2 text-right text-ink align-top"
              {...props}
            />
          ),
          hr: ({ node: _n, ...props }) => (
            <hr className="my-3 border-rule" {...props} />
          ),
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
}