Chat Terminal

Тёмный терминальный блок с ANSI-цветами, автопрокруткой, копированием и очисткой.

Терминал

$ bun run build
▲ Next.js 16.1.7

  ✓ Compiled successfully in 4.8s
  ✓ Collecting page data
  ✓ Generating static pages (564/564)

Route (app)                       Size  First Load JS
┌ ○ /                            142 B          92.4 kB
├ ○ /docs                       1.18 kB         98.1 kB
└ ● /docs/ai/[component]         523 B          93.8 kB

✓ Build complete
! 2 warnings

"use client";

import { useState } from "react";
import { ChatTerminal } from "@/components/ui/chat-terminal";

const initialOutput = [
  "\x1b[2m$\x1b[0m bun run build",
  "\x1b[36m▲\x1b[0m Next.js 16.1.7",
  "",
  "  \x1b[32m✓\x1b[0m Compiled successfully in \x1b[1m4.8s\x1b[0m",
  "  \x1b[32m✓\x1b[0m Collecting page data",
  "  \x1b[32m✓\x1b[0m Generating static pages \x1b[2m(564/564)\x1b[0m",
  "",
  "Route (app)                       \x1b[2mSize  First Load JS\x1b[0m",
  "\x1b[2m┌\x1b[0m ○ /                            142 B          92.4 kB",
  "\x1b[2m├\x1b[0m ○ /docs                       1.18 kB         98.1 kB",
  "\x1b[2m└\x1b[0m ● /docs/ai/[component]         523 B          93.8 kB",
  "",
  "\x1b[32m✓\x1b[0m Build complete",
  "\x1b[33m!\x1b[0m 2 warnings",
].join("\n");

export default function Particle() {
  const [output, setOutput] = useState(initialOutput);

  return (
    <div className="w-full max-w-2xl p-4">
      <ChatTerminal onClear={() => setOutput("")} output={output} />
    </div>
  );
}

Установка


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

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

import {
  ChatTerminal,
  ChatTerminalActions,
  ChatTerminalClearButton,
  ChatTerminalContent,
  ChatTerminalCopyButton,
  ChatTerminalHeader,
  ChatTerminalTitle,
} from "@/components/ui/chat-terminal";
 
<ChatTerminal output={output} isStreaming={running} onClear={() => clear()} />
 
// или с кастомным header
<ChatTerminal output={output} isStreaming={running}>
  <ChatTerminalHeader>
    <ChatTerminalTitle>npm test</ChatTerminalTitle>
    <ChatTerminalActions>
      <ChatTerminalCopyButton />
      <ChatTerminalClearButton />
    </ChatTerminalActions>
  </ChatTerminalHeader>
  <ChatTerminalContent maxHeight={420} />
</ChatTerminal>

ANSI-цвета

Встроенный мини-парсер ANSI escape-кодов — поддерживает:

цвета текста \x1b[31m … \x1b[0m (30–37, 90–97)
цвета фона (40–47)
жирный (\x1b[1m), подчёркивание (\x1b[4m)

Этого хватает для большинства CLI (vitest, jest, tsc, eslint, bun, …). Цвета сопоставляются с токенами Tailwind, а копирование через ChatTerminalCopyButton автоматически снимает ANSI-коды.

Свойства

Свойство	По умолчанию	Описание
`output`	—	Сырой вывод stdout/stderr.
`isStreaming`	`false`	Показывает мигающий курсор в конце.
`autoScroll`	`true`	Прокручивать в конец при новом выводе.
`onClear`	—	Если задано — отрисовывает кнопку очистки.

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

Установка Использование ANSI-цвета Свойства