v2 initial commit
This commit is contained in:
n4ze3m
98
src/components/Common/Markdown.tsx
Normal file
98
src/components/Common/Markdown.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
||||
import remarkGfm from "remark-gfm"
|
||||
import { nightOwl } from "react-syntax-highlighter/dist/cjs/styles/prism"
|
||||
import rehypeMathjax from "rehype-mathjax"
|
||||
import remarkMath from "remark-math"
|
||||
import ReactMarkdown from "react-markdown"
|
||||
import { ClipboardIcon, CheckIcon, EyeIcon } from "@heroicons/react/24/outline"
|
||||
import React from "react"
|
||||
import { Tooltip } from "antd"
|
||||
|
||||
export default function Markdown({ message }: { message: string }) {
|
||||
const [isBtnPressed, setIsBtnPressed] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isBtnPressed) {
|
||||
setTimeout(() => {
|
||||
setIsBtnPressed(false)
|
||||
}, 4000)
|
||||
}
|
||||
}, [isBtnPressed])
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ReactMarkdown
|
||||
className="prose break-words dark:prose-invert text-sm prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeMathjax]}
|
||||
components={{
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || "")
|
||||
return !inline ? (
|
||||
<div className="code relative text-base bg-gray-800 rounded-md overflow-hidden">
|
||||
<div className="flex items-center justify-between py-1.5 px-4">
|
||||
<span className="text-xs lowercase text-gray-200">
|
||||
{className && className.replace("language-", "")}
|
||||
</span>
|
||||
|
||||
<div className="flex items-center">
|
||||
|
||||
<Tooltip title="Copy to clipboard">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(children[0] as string)
|
||||
setIsBtnPressed(true)
|
||||
}}
|
||||
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100">
|
||||
{!isBtnPressed ? (
|
||||
<ClipboardIcon className="h-4 w-4" />
|
||||
) : (
|
||||
<CheckIcon className="h-4 w-4 text-green-400" />
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<SyntaxHighlighter
|
||||
{...props}
|
||||
children={String(children).replace(/\n$/, "")}
|
||||
style={nightOwl}
|
||||
key={Math.random()}
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
fontSize: "1rem",
|
||||
lineHeight: "1.5rem"
|
||||
}}
|
||||
language={(match && match[1]) || ""}
|
||||
codeTagProps={{
|
||||
className: "text-sm"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<code className={`${className} font-semibold`} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
},
|
||||
a({ node, ...props }) {
|
||||
return (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 text-sm hover:underline"
|
||||
{...props}>
|
||||
{props.children}
|
||||
</a>
|
||||
)
|
||||
},
|
||||
p({ children }) {
|
||||
return <p className="mb-2 last:mb-0">{children}</p>
|
||||
}
|
||||
}}>
|
||||
{message}
|
||||
</ReactMarkdown>
|
||||
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
78
src/components/Common/Playground/Message.tsx
Normal file
78
src/components/Common/Playground/Message.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import {
|
||||
CheckIcon,
|
||||
ClipboardIcon,
|
||||
} from "@heroicons/react/24/outline"
|
||||
import Markdown from "../../Common/Markdown"
|
||||
import React from "react"
|
||||
|
||||
type Props = {
|
||||
message: string
|
||||
hideCopy?: boolean
|
||||
botAvatar?: JSX.Element
|
||||
userAvatar?: JSX.Element
|
||||
isBot: boolean
|
||||
}
|
||||
|
||||
export const PlaygroundMessage = (props: Props) => {
|
||||
const [isBtnPressed, setIsBtnPressed] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isBtnPressed) {
|
||||
setTimeout(() => {
|
||||
setIsBtnPressed(false)
|
||||
}, 4000)
|
||||
}
|
||||
}, [isBtnPressed])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 ${
|
||||
!props.isBot ? "dark:bg-black" : "bg-gray-50 dark:bg-[#0a0a0a]"
|
||||
}`}>
|
||||
<div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
|
||||
<div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
|
||||
<div className="w-8 flex flex-col relative items-end">
|
||||
<div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center text-opacity-100r">
|
||||
{props.isBot ? (
|
||||
!props.botAvatar ? (
|
||||
<div className="absolute h-8 w-8 rounded-full bg-gradient-to-r from-green-300 to-purple-400"></div>
|
||||
) : (
|
||||
props.botAvatar
|
||||
)
|
||||
) : !props.userAvatar ? (
|
||||
<div className="absolute h-8 w-8 rounded-full from-blue-400 to-blue-600 bg-gradient-to-r"></div>
|
||||
) : (
|
||||
props.userAvatar
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
|
||||
<div className="flex flex-grow flex-col gap-3">
|
||||
<Markdown message={props.message} />
|
||||
</div>
|
||||
{/* source if aviable */}
|
||||
</div>
|
||||
|
||||
{props.isBot && (
|
||||
<div className="flex space-x-2">
|
||||
{!props.hideCopy && (
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(props.message)
|
||||
setIsBtnPressed(true)
|
||||
}}
|
||||
className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
{!isBtnPressed ? (
|
||||
<ClipboardIcon className="w-4 h-4 text-gray-400 group-hover:text-gray-500" />
|
||||
) : (
|
||||
<CheckIcon className="w-4 h-4 text-green-400 group-hover:text-green-500" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user