components/assistant-ui/markdown-text.tsx

//
// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
// SPDX-License-Identifier: MIT
//

"use client";

import "@assistant-ui/react-markdown/styles/dot.css";

import {
  type CodeHeaderProps,
  MarkdownTextPrimitive,
  unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
  useIsMarkdownCodeBlock,
} from "@assistant-ui/react-markdown";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import { type FC, memo, useState, useCallback, Fragment } from "react";
import { CheckIcon, CopyIcon, PlayIcon } from "lucide-react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
import { cn } from "@/lib/utils";

import { SyntaxHighlighter } from "./syntax-highlighter";

const REMARK_PLUGINS = [remarkGfm];
const REHYPE_PLUGINS = [rehypeRaw];

const MarkdownTextImpl = () => {
  return (
    <MarkdownTextPrimitive
      remarkPlugins={REMARK_PLUGINS}
      rehypePlugins={REHYPE_PLUGINS}
      className="aui-md"
      components={defaultComponents}
    />
  );
};

export const MarkdownText = memo(MarkdownTextImpl);

// --- START: کامپوننت هدر کد ویرایش شده است ---
const CodeHeaderImpl: FC<CodeHeaderProps> = ({ language, code }) => {
  const { isCopied, copyToClipboard } = useCopyToClipboard();
  const [isExecutorOpen, setExecutorOpen] = useState(false);

  const onCopy = useCallback(() => {
    if (!code || isCopied) return;
    copyToClipboard(code);
  }, [code, isCopied, copyToClipboard]);

  const onRun = () => {
    setExecutorOpen(true);
  };

  return (
    <>
      {/* افزودن dir="ltr" برای چپ‌چین کردن هدر بلوک کد */}
      <div
        dir="ltr"
        className="aui-code-header-root mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-muted-foreground/15 px-4 py-2 text-sm font-semibold text-foreground dark:bg-muted-foreground/20"
      >
        <span className="aui-code-header-language lowercase [&>span]:text-xs">
          {language}
        </span>
        <div className="flex items-center gap-1">
          {language === 'html' && (
            <TooltipIconButton
              tooltip="اجرا"
              onClick={onRun}
              className="transition-transform hover:scale-110 hover:text-green-400"
            >
              <PlayIcon />
            </TooltipIconButton>
          )}
          <TooltipIconButton tooltip="کپی" onClick={onCopy}>
            {!isCopied && <CopyIcon />}
            {isCopied && <CheckIcon />}
          </TooltipIconButton>
        </div>
      </div>

      <Dialog open={isExecutorOpen} onOpenChange={setExecutorOpen}>
        <DialogContent className="max-w-4xl h-[80vh] p-0 flex flex-col">
          <DialogHeader className="p-4 border-b">
            <DialogTitle>پیش‌نمایش کد HTML</DialogTitle>
          </DialogHeader>
          <div className="flex-grow p-2">
            <iframe
              srcDoc={code}
              title="HTML Executor"
              sandbox="allow-scripts"
              className="w-full h-full border-0 rounded-md"
            />
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
};
// --- END: کامپوننت هدر کد ویرایش شده است ---

const CodeHeader = memo(CodeHeaderImpl);
CodeHeader.displayName = "CodeHeader";

const useCopyToClipboard = ({
  copiedDuration = 3000,
}: {
  copiedDuration?: number;
} = {}) => {
  const [isCopied, setIsCopied] = useState<boolean>(false);

  const copyToClipboard = useCallback((value: string) => {
    if (!value) return;

    navigator.clipboard.writeText(value).then(() => {
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), copiedDuration);
    });
  }, [copiedDuration]);

  return { isCopied, copyToClipboard };
};

const TableWrapper = memo(({ children }: { children: React.ReactNode }) => (
  <div className="my-5 w-full overflow-x-auto">
    {children}
  </div>
));
TableWrapper.displayName = "TableWrapper";

const MemoizedSyntaxHighlighter = memo(SyntaxHighlighter);

const processTableContent = (children: React.ReactNode): React.ReactNode => {
  if (typeof children === 'string') {
    const parts = children
      .split(/(?:<br\s*\/?>|\n)+/i)
      .map(part => part.trim())
      .filter(part => part.length > 0);
    
    if (parts.length === 0) return '';
    if (parts.length === 1) return parts[0];
    
    return parts.reduce<React.ReactNode[]>((acc, part, index) => {
      if (index > 0) acc.push(<br key={`br-${index}`} />);
      acc.push(part);
      return acc;
    }, []);
  }
  
  if (Array.isArray(children)) {
    return children.map((child, index) => (
      <Fragment key={index}>{processTableContent(child)}</Fragment>
    ));
  }
  
  return children;
};

// ... بقیه کامپوننت‌های استایل‌دهی متن بدون تغییر باقی می‌مانند ...

const H1 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
  <h1
    className={cn(
      "aui-md-h1 mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
      className,
    )}
    {...props}
  />
));
H1.displayName = "H1";

const H2 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
  <h2
    className={cn(
      "aui-md-h2 mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
      className,
    )}
    {...props}
  />
));
H2.displayName = "H2";

const H3 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
  <h3
    className={cn(
      "aui-md-h3 mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
      className,
    )}
    {...props}
  />
));
H3.displayName = "H3";

const H4 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
  <h4
    className={cn(
      "aui-md-h4 mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
      className,
    )}
    {...props}
  />
));
H4.displayName = "H4";

const H5 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
  <h5
    className={cn(
      "aui-md-h5 my-4 text-lg font-semibold first:mt-0 last:mb-0",
      className,
    )}
    {...props}
  />
));
H5.displayName = "H5";

const H6 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
  <h6
    className={cn(
      "aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0",
      className,
    )}
    {...props}
  />
));
H6.displayName = "H6";

const P = memo(({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
  <p
    className={cn(
      "aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0",
      className,
    )}
    {...props}
  />
));
P.displayName = "P";

const A = memo(({ className, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
  <a
    className={cn(
      "aui-md-a font-medium text-primary underline underline-offset-4",
      className,
    )}
    {...props}
  />
));
A.displayName = "A";

const Blockquote = memo(({ className, ...props }: React.BlockquoteHTMLAttributes<HTMLQuoteElement>) => (
  <blockquote
    className={cn("aui-md-blockquote border-l-2 pl-6 italic", className)}
    {...props}
  />
));
Blockquote.displayName = "Blockquote";

const Ul = memo(({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
  <ul
    className={cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className)}
    {...props}
  />
));
Ul.displayName = "Ul";

const Ol = memo(({ className, ...props }: React.OlHTMLAttributes<HTMLOListElement>) => (
  <ol
    className={cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className)}
    {...props}
  />
));
Ol.displayName = "Ol";

const Hr = memo(({ className, ...props }: React.HTMLAttributes<HTMLHRElement>) => (
  <hr className={cn("aui-md-hr my-5 border-b", className)} {...props} />
));
Hr.displayName = "Hr";

const Table = memo(({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (
  <TableWrapper>
    <table
      className={cn(
        "aui-md-table w-full min-w-full border-separate border-spacing-0",
        className,
      )}
      {...props}
    />
  </TableWrapper>
));
Table.displayName = "Table";

const Th = memo(({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
  <th
    className={cn(
      "aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
      className,
    )}
    {...props}
  >
    {processTableContent(children)}
  </th>
));
Th.displayName = "Th";

const Td = memo(({ className, children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
  <td
    className={cn(
      "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
      className,
    )}
    {...props}
  >
    {processTableContent(children)}
  </td>
));
Td.displayName = "Td";

const Tr = memo(({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
  <tr
    className={cn(
      "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
      className,
    )}
    {...props}
  />
));
Tr.displayName = "Tr";

const Sup = memo(({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
  <sup
    className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
    {...props}
  />
));
Sup.displayName = "Sup";

// --- START: کامپوننت Pre (بلوک کد) ویرایش شده است ---
const Pre = memo(({ className, ...props }: React.HTMLAttributes<HTMLPreElement>) => (
  // افزودن dir="ltr" برای چپ‌چین کردن خود بلوک کد
  <pre
    dir="ltr"
    className={cn(
      "aui-md-pre overflow-x-auto !rounded-t-none rounded-b-lg bg-black p-4 text-white",
      className,
    )}
    {...props}
  />
));
// --- END: کامپوننت Pre (بلوک کد) ویرایش شده است ---
Pre.displayName = "Pre";

const Code = memo(function Code({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
  const isCodeBlock = useIsMarkdownCodeBlock();
  return (
    <code
      className={cn(
        !isCodeBlock &&
          "aui-md-inline-code rounded border bg-muted font-semibold px-1.5 py-0.5",
        className,
      )}
      {...props}
    />
  );
});
Code.displayName = "Code";

const defaultComponents = memoizeMarkdownComponents({
  SyntaxHighlighter: MemoizedSyntaxHighlighter,
  h1: H1,
  h2: H2,
  h3: H3,
  h4: H4,
  h5: H5,
  h6: H6,
  p: P,
  a: A,
  blockquote: Blockquote,
  ul: Ul,
  ol: Ol,
  hr: Hr,
  table: Table,
  th: Th,
  td: Td,
  tr: Tr,
  sup: Sup,
  pre: Pre,
  code: Code,
  CodeHeader,
});