jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fixed scroll glitch on code block

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-10 20:19:38 -03:00
commit 3285aa5cc3
2 changed files with 56 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx
View file

@ -1,5 +1,5 @@
import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react"; import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
import { FC, memo, useState } from "react"; import { useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { programmingLanguages } from "../../../../utils"; import { programmingLanguages } from "../../../../utils";
@ -9,7 +9,7 @@ interface Props {
value: string; value: string;
} }
export const CodeBlock: FC<Props> = memo(({ language, value }) => { export function CodeBlock({ language, value }) {
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
const copyToClipboard = () => { const copyToClipboard = () => {
@ -63,7 +63,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
</div> </div>
<SyntaxHighlighter <SyntaxHighlighter
className=" w-[47vw]" className="overflow-auto"
language={language} language={language}
style={oneDark} style={oneDark}
customStyle={{ margin: 0 }} customStyle={{ margin: 0 }}
@ -72,5 +72,5 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
</SyntaxHighlighter> </SyntaxHighlighter>
</div> </div>
); );
}); }
CodeBlock.displayName = "CodeBlock"; CodeBlock.displayName = "CodeBlock";

91
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -1,6 +1,6 @@
import Convert from "ansi-to-html"; import Convert from "ansi-to-html";
import { ChevronDown } from "lucide-react"; import { ChevronDown } from "lucide-react";
import { useState } from "react"; import { useMemo, useState } from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax"; import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
@ -75,47 +75,60 @@ export default function ChatMessage({
<div className="w-full"> <div className="w-full">
<div className="w-full dark:text-white"> <div className="w-full dark:text-white">
<div className="w-full"> <div className="w-full">
<ReactMarkdown {useMemo(
remarkPlugins={[remarkGfm, remarkMath]} () => (
rehypePlugins={[rehypeMathjax]} <ReactMarkdown
className="markdown prose inline-block break-words text-primary remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose inline-block break-words text-primary
dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw]" dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw]"
components={{ components={{
code({ node, inline, className, children, ...props }) { code: ({
if (children.length) { node,
if (children[0] === "▍") { inline,
return ( className,
<span className="form-modal-markdown-span"> children,
▍ ...props
</span> }) => {
if (children.length) {
if (children[0] === "▍") {
return (
<span className="form-modal-markdown-span">
▍
</span>
);
}
children[0] = (children[0] as string).replace(
"`▍`",
"▍"
);
}
const match = /language-(\w+)/.exec(
className || ""
); );
}
children[0] = (children[0] as string).replace( return !inline ? (
"`▍`", <CodeBlock
"▍" key={Math.random()}
); language={(match && match[1]) || ""}
} value={String(children).replace(/\n$/, "")}
{...props}
const match = /language-(\w+)/.exec(className || ""); />
) : (
return !inline ? ( <code className={className} {...props}>
<CodeBlock {children}
key={Math.random()} </code>
language={(match && match[1]) || ""} );
value={String(children).replace(/\n$/, "")} },
{...props} }}
/> >
) : ( {chat.message.toString()}
<code className={className} {...props}> </ReactMarkdown>
{children} ),
</code> [chat.message.toString()]
); )}
},
}}
>
{chat.message.toString()}
</ReactMarkdown>
</div> </div>
{chat.files && ( {chat.files && (
<div className="my-2 w-full"> <div className="my-2 w-full">