Chat Code Block

Самостоятельный блок кода с подсветкой shiki, header, copy и line numbers.

Chat.tsx

import { ChatConversation, ChatConversationContent } from "@/components/ui/chat-conversation";import { ChatMessage, ChatMessageContent } from "@/components/ui/chat-message";
export function Chat({ messages }) {  return (    <ChatConversation>      <ChatConversationContent>        {messages.map((m) => (          <ChatMessage from={m.role} key={m.id}>            <ChatMessageContent>{m.content}</ChatMessageContent>          </ChatMessage>        ))}      </ChatConversationContent>    </ChatConversation>  );}

import {
  ChatCodeBlock,
  ChatCodeBlockActions,
  ChatCodeBlockCopyButton,
  ChatCodeBlockFilename,
  ChatCodeBlockHeader,
} from "@/components/ui/chat-code-block";

const snippet = `import { ChatConversation, ChatConversationContent } from "@/components/ui/chat-conversation";
import { ChatMessage, ChatMessageContent } from "@/components/ui/chat-message";

export function Chat({ messages }) {
  return (
    <ChatConversation>
      <ChatConversationContent>
        {messages.map((m) => (
          <ChatMessage from={m.role} key={m.id}>
            <ChatMessageContent>{m.content}</ChatMessageContent>
          </ChatMessage>
        ))}
      </ChatConversationContent>
    </ChatConversation>
  );
}`;

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatCodeBlock code={snippet} language="tsx" showLineNumbers>
        <ChatCodeBlockHeader>
          <ChatCodeBlockFilename>Chat.tsx</ChatCodeBlockFilename>
          <ChatCodeBlockActions>
            <ChatCodeBlockCopyButton />
          </ChatCodeBlockActions>
        </ChatCodeBlockHeader>
      </ChatCodeBlock>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-code-block

Подсветка через shiki (lazy-loaded — грамматика подгружается при первом рендере языка).

Использование

import {
  ChatCodeBlock,
  ChatCodeBlockActions,
  ChatCodeBlockCopyButton,
  ChatCodeBlockFilename,
  ChatCodeBlockHeader,
} from "@/components/ui/chat-code-block";
 
<ChatCodeBlock
  code={tsxSnippet}
  language="tsx"
  showLineNumbers
>
  <ChatCodeBlockHeader>
    <ChatCodeBlockFilename>App.tsx</ChatCodeBlockFilename>
    <ChatCodeBlockActions>
      <ChatCodeBlockCopyButton />
    </ChatCodeBlockActions>
  </ChatCodeBlockHeader>
</ChatCodeBlock>

Когда использовать vs `ChatResponse`

ChatResponse — целое сообщение с markdown, code blocks внутри прокидываются автоматически через streamdown.
ChatCodeBlock — самостоятельный блок (например, артефакт от tool-call или код в side-panel), которому нужны copy-кнопка и filename-header.

API

Свойство	Описание
`code`	Исходник как строка.
`language`	shiki `BundledLanguage` (`tsx`, `python`, `rust`, …).
`showLineNumbers`	Включает CSS-counter с номерами строк.

На этой странице

Установка Использование Когда использовать vs ChatResponseAPI

Chat Code Block

Установка

Использование

Когда использовать vs ChatResponse

API

Когда использовать vs `ChatResponse`