Brooklyn Nicholson
b7fc36cf3c
A fenced block carried a bordered card with a "Code · <lang>" title row and a pinned copy button, which read as an attached artifact next to the reply. Drop the border and the header: the block is now a tinted slab on --ui-bg-editor with syntax highlighting and a copy button that reveals on hover. The streaming glow moves entirely to box-shadow since there is no border left to animate.
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import * as React from 'react'
|
|
|
|
import { Codicon, type CodiconProps } from '@/components/ui/codicon'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
/**
|
|
* Rounded surface for fenced code (and any equivalent: diffs, raw payloads,
|
|
* etc.) sized for the conversation column. Background only — no border, no
|
|
* header, no language label — so a code block reads as a tinted slab of the
|
|
* reply rather than an attached artifact.
|
|
*/
|
|
function CodeCard({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'group/code relative min-w-0 max-w-full overflow-hidden rounded-[0.625rem] bg-(--ui-bg-editor) [--expandable-fade-from:var(--ui-bg-editor)] text-[length:var(--conversation-tool-font-size)] text-muted-foreground',
|
|
className
|
|
)}
|
|
data-slot="code-card"
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CodeCardIcon({ className, ...props }: CodiconProps) {
|
|
return (
|
|
<Codicon
|
|
className={cn('shrink-0 text-[0.875rem] leading-none text-muted-foreground', className)}
|
|
data-slot="code-card-icon"
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CodeCardBody({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'font-mono text-[0.7rem] leading-relaxed text-foreground/90 [&_pre]:m-0 [&_pre]:overflow-x-auto [&_pre]:bg-transparent! [&_pre]:px-2 [&_pre]:py-1.5 [&_pre]:font-mono [&_pre]:leading-relaxed',
|
|
className
|
|
)}
|
|
data-slot="code-card-body"
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { CodeCard, CodeCardBody, CodeCardIcon }
|