TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sticky copy-reply button on chat code-snippets

Browse Source
This commit is contained in:
Akhileshrangani4 2024-11-30 01:33:54 -05:00
parent ebfde291ad
commit 721ea5cad2
1 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/components/editor/AIChat/lib/markdownComponents.tsx
View File

@ -25,12 +25,14 @@ export const createMarkdownComponents = (
const match = /language-(\w+)/.exec(className || "") const match = /language-(\w+)/.exec(className || "")
return match ? ( return match ? (
<div className="relative border border-input rounded-md my-4"> <div className="relative border border-input rounded-md mt-8 my-2 translate-y-[-1rem]">
<div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl"> <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 rounded-tl">
{match[1]} {match[1]}
</div> </div>
<div className="absolute top-0 right-0 flex"> <div className="sticky top-0 right-0 flex justify-end z-10">
<div className="flex border border-input shadow-lg bg-background rounded-md">
{renderCopyButton(children)} {renderCopyButton(children)}
<div className="w-px bg-input"></div>
<Button <Button
onClick={(e) => { onClick={(e) => {
e.preventDefault() e.preventDefault()
@ -44,7 +46,7 @@ export const createMarkdownComponents = (
<CornerUpLeft className="w-4 h-4" /> <CornerUpLeft className="w-4 h-4" />
</Button> </Button>
</div> </div>
<div className="pt-6"> </div>
<SyntaxHighlighter <SyntaxHighlighter
style={vscDarkPlus as any} style={vscDarkPlus as any}
language={match[1]} language={match[1]}
@ -58,7 +60,6 @@ export const createMarkdownComponents = (
{stringifyContent(children)} {stringifyContent(children)}
</SyntaxHighlighter> </SyntaxHighlighter>
</div> </div>
</div>
) : ( ) : (
<code className={className} {...props}> <code className={className} {...props}>
{children} {children}