Chat Response

import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";
import { ChatResponse } from "@/components/ui/chat-response";

const markdown = `## Настройка Next.js с App Router

Краткое руководство по созданию нового проекта. **App Router** используется по
умолчанию начиная с Next.js 13 — он сразу даёт React Server Components, стриминг и
вложенные макеты.

### Создание проекта

\`\`\`bash
npx create-next-app@latest my-app --typescript --app
cd my-app
\`\`\`

Это создаёт каталог \`app/\`. Точка входа — \`app/page.tsx\`, а общая обвязка
располагается в \`app/layout.tsx\`.

### Ключевые идеи

1. **Серверные компоненты по умолчанию** — компоненты рендерятся на сервере, пока вы
   не добавите директиву \`"use client"\`.
2. **Загрузка данных рядом с компонентом** — пишите \`await\` прямо внутри компонента;
   никакого \`getServerSideProps\`.
3. **Стриминг** — оборачивайте медленные поддеревья в \`<Suspense>\`, чтобы HTML
   отдавался постепенно.

> [!TIP]
> Нажмите <kbd>⌘</kbd> <kbd>K</kbd> в панели, чтобы сразу перейти к любому маршруту.

### Сравнение

| Возможность | Pages Router | App Router |
| --- | --- | --- |
| Загрузка данных | \`getServerSideProps\` | \`async\`-компоненты |
| Макеты | \`_app.tsx\` | вложенные \`layout.tsx\` |
| Стриминг | ограниченный | из коробки |

Подробнее в [официальной документации](https://nextjs.org/docs/app).`;

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="O" />
        <ChatMessageContent>
          <ChatResponse>{markdown}</ChatResponse>
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

"use client";

import { useState } from "react";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";
import { ChatResponse } from "@/components/ui/chat-response";

const markdown = `### Чек-лист релиза

Оповещения в стиле GitHub отрисовываются с семантическими токенами — note, tip,
important, warning и caution соответствуют своей цветовой роли в DS:

> [!NOTE]
> Отведите релизную ветку от \`main\` перед тем, как ставить тег.

> [!TIP]
> Запустите \`pnpm changeset\`, чтобы автоматически подготовить changelog.

> [!IMPORTANT]
> Миграцию в \`0003_add_index.sql\` **нельзя** откатить.

> [!WARNING]
> Деплои старше 24 часов нельзя откатить через интерфейс.

> [!CAUTION]
> Никогда не запускайте \`db:reset\` на продакшен-строке подключения.

Отмечайте пункты — список интерактивный[^1]:

- [x] Поднять версию
- [x] Обновить changelog
- [ ] Поставить тег на коммит
- [ ] Опубликовать в npm

Горячая клавиша для публикации: <kbd>⌘</kbd> <kbd>Enter</kbd>. Встроенный код вроде
\`pnpm release\` читается прямо в предложении, а блоки кода получают кнопку копирования
при наведении:

\`\`\`ts
export async function release(tag: string) {
  await build();
  await publish(tag);
}
\`\`\`

[^1]: Состояние хранится внутри компонента; переключатели сохраняются, пока ответ примонтирован.`;

export default function Particle() {
  const [copied, setCopied] = useState<string | null>(null);

  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="O" />
        <ChatMessageContent>
          <ChatResponse
            onCopy={(text) => {
              setCopied(text);
              setTimeout(() => setCopied(null), 1500);
            }}
          >
            {markdown}
          </ChatResponse>
          {copied ? (
            <p className="mt-2 text-muted-foreground text-xs" role="status">
              Скопировано символов в буфер обмена: {copied.length}
            </p>
          ) : null}
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}