Chat Snippet

Inline копируемый сниппет команды — для shell-однострочников.

$npm install @oracul/ui

$bunx --bun shadcn@latest add @oracul/chat-message

$git checkout -b feature/ai-chat

import { ChatSnippet } from "@/components/ui/chat-snippet";

export default function Particle() {
  return (
    <div className="flex w-full max-w-md flex-col gap-2 p-4">
      <ChatSnippet code="npm install @oracul/ui" />
      <ChatSnippet code="bunx --bun shadcn@latest add @oracul/chat-message" />
      <ChatSnippet code="git checkout -b feature/ai-chat" />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-snippet

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

import {
  ChatSnippet,
  ChatSnippetCode,
  ChatSnippetCopyButton,
  ChatSnippetText,
} from "@/components/ui/chat-snippet";
 
<ChatSnippet code="npm install @oracul/ui" />
 
// или с кастомным префиксом
<ChatSnippet code="bun add @oracul/ui">
  <ChatSnippetText>$</ChatSnippetText>
  <ChatSnippetCode />
  <ChatSnippetCopyButton />
</ChatSnippet>

Когда брать ChatSnippet vs ChatCodeBlock:

ChatSnippet — короткий read-only one-liner (команда, URL). Inline-ширина, без подсветки.
ChatCodeBlock — многострочный код с shiki-подсветкой, header, filename, line numbers.

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

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