c6c01101f1
- added context tabs - added multifile context including file and image uploads to the context along with all the files from the project - added file/image previews on input - added code paste from the editor and file lines recognition - added image paste from clipboard and preview
80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import { Components } from "react-markdown"
|
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
|
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
|
|
import { Button } from "../../../ui/button"
|
|
import { CornerUpLeft } from "lucide-react"
|
|
import { stringifyContent } from "./chatUtils"
|
|
|
|
// Create markdown components for chat message component
|
|
export const createMarkdownComponents = (
|
|
renderCopyButton: (text: any) => JSX.Element,
|
|
renderMarkdownElement: (props: any) => JSX.Element,
|
|
askAboutCode: (code: any) => void
|
|
): Components => ({
|
|
code: ({ node, className, children, ...props }: {
|
|
node?: import('hast').Element,
|
|
className?: string,
|
|
children?: React.ReactNode,
|
|
[key: string]: any,
|
|
}) => {
|
|
const match = /language-(\w+)/.exec(className || "")
|
|
|
|
return match ? (
|
|
<div className="relative border border-input rounded-md my-4">
|
|
<div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
|
|
{match[1]}
|
|
</div>
|
|
<div className="absolute top-0 right-0 flex">
|
|
{renderCopyButton(children)}
|
|
<Button
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
askAboutCode(children)
|
|
}}
|
|
size="sm"
|
|
variant="ghost"
|
|
className="p-1 h-6"
|
|
>
|
|
<CornerUpLeft className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="pt-6">
|
|
<SyntaxHighlighter
|
|
style={vscDarkPlus as any}
|
|
language={match[1]}
|
|
PreTag="div"
|
|
customStyle={{
|
|
margin: 0,
|
|
padding: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
}}
|
|
>
|
|
{stringifyContent(children)}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<code className={className} {...props}>{children}</code>
|
|
)
|
|
},
|
|
// Render markdown elements
|
|
p: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
|
|
h1: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
|
|
h2: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
|
|
h3: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
|
|
h4: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
|
|
h5: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
|
|
h6: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
|
|
ul: (props) => (
|
|
<ul className="list-disc pl-6 mb-4 space-y-2">
|
|
{props.children}
|
|
</ul>
|
|
),
|
|
ol: (props) => (
|
|
<ol className="list-decimal pl-6 mb-4 space-y-2">
|
|
{props.children}
|
|
</ol>
|
|
),
|
|
})
|