schihei/chatbot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Latex plugin (#165)

Browse Source
This commit is contained in:
Bruce Shi
2023-03-25 21:37:00 -07:00
committed by GitHub
parent 14fe29c03a
commit 499007da94
4 changed files with 5245 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/ChatMessage.tsx
+39 -46
View File
@@ -3,9 +3,10 @@ import { IconEdit } from "@tabler/icons-react";
import { useTranslation } from "next-i18next";
import { FC, useEffect, useRef, useState } from "react";
import ReactMarkdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import { CodeBlock } from "../Markdown/CodeBlock";
import { CopyButton } from "./CopyButton";
interface Props {
message: Message;
@@ -132,51 +133,43 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
)}
</div>
) : (
<>
<ReactMarkdown
className="prose dark:prose-invert"
remarkPlugins={[remarkGfm]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
<CodeBlock
key={Math.random()}
language={match[1]}
value={String(children).replace(/\n$/, "")}
lightMode={lightMode}
{...props}
/>
) : (
<code
className={className}
{...props}
>
{children}
</code>
);
},
table({ children }) {
return <table className="border-collapse border border-black dark:border-white py-1 px-3">{children}</table>;
},
th({ children }) {
return <th className="border border-black dark:border-white break-words py-1 px-3 bg-gray-500 text-white">{children}</th>;
},
td({ children }) {
return <td className="border border-black dark:border-white break-words py-1 px-3">{children}</td>;
}
}}
>
{message.content}
</ReactMarkdown>
{(isHovering || window.innerWidth < 640) && (
<CopyButton
messagedCopied={messagedCopied}
copyOnClick={copyOnClick}
/>
)}
</>
<ReactMarkdown
className="prose dark:prose-invert"
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
<CodeBlock
key={Math.random()}
language={match[1]}
value={String(children).replace(/\n$/, "")}
lightMode={lightMode}
{...props}
/>
) : (
<code
className={className}
{...props}
>
{children}
</code>
);
},
table({ children }) {
return <table className="border-collapse border border-black dark:border-white py-1 px-3">{children}</table>;
},
th({ children }) {
return <th className="border border-black dark:border-white break-words py-1 px-3 bg-gray-500 text-white">{children}</th>;
},
td({ children }) {
return <td className="border border-black dark:border-white break-words py-1 px-3">{children}</td>;
}
}}
>
{message.content}
</ReactMarkdown>
)}
</div>
</div>