Chat Message

"use client";

import { IconCopy, IconPencil, IconRefresh } from "@tabler/icons-react";
import { useEffect, useState } from "react";
import {
  ChatMessage,
  ChatMessageAction,
  ChatMessageActions,
  ChatMessageContent,
  ChatMessageTime,
} from "@/components/ui/chat-message";

export default function Particle() {
  const [now, setNow] = useState<number | null>(null);
  useEffect(() => setNow(Date.now()), []);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-10 p-4">
      <ChatMessage from="user">
        <ChatMessageContent>Сравни Oracul DS и shadcn/ui</ChatMessageContent>
        <ChatMessageActions variant="user">
          <ChatMessageAction label="Редактировать">
            <IconPencil aria-hidden="true" stroke={1} />
          </ChatMessageAction>
          <ChatMessageAction label="Копировать">
            <IconCopy aria-hidden="true" stroke={1} />
          </ChatMessageAction>
          <ChatMessageTime now={now} ts={Date.now() - 1000 * 60 * 5} />
        </ChatMessageActions>
      </ChatMessage>

      <ChatMessage from="assistant">
        <ChatMessageContent>
          Oracul построен на Base UI (преемник Radix): использует `render` prop
          вместо `asChild` и идёт с большой коллекцией particles. Установка и
          темизация совместимы с shadcn CLI, а тёплые токены — корректная
          система Claude.
        </ChatMessageContent>
        <ChatMessageActions variant="assistant" visibility="always">
          <ChatMessageAction label="Копировать">
            <IconCopy aria-hidden="true" stroke={1} />
          </ChatMessageAction>
          <ChatMessageAction label="Перегенерировать">
            <IconRefresh aria-hidden="true" stroke={1} />
          </ChatMessageAction>
          <ChatMessageTime now={now} ts={Date.now() - 1000 * 60} />
        </ChatMessageActions>
      </ChatMessage>

      <ChatMessage from="system">
        <ChatMessageContent>
          Системное сообщение: модель переключена на claude-opus-4.8
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

"use client";

import { IconCopy, IconPencil } from "@tabler/icons-react";
import { useState } from "react";
import {
  ChatMessage,
  ChatMessageAction,
  ChatMessageActions,
  ChatMessageContent,
  ChatMessageEdit,
  ChatMessageEditActions,
} from "@/components/ui/chat-message";

export default function Particle() {
  const [content, setContent] = useState("Сравни Oracul DS и shadcn/ui");
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(content);

  const save = (value: string) => {
    setContent(value);
    setEditing(false);
  };

  return (
    <div className="flex w-full max-w-2xl flex-col gap-6 p-4">
      <ChatMessage from="user">
        {editing ? (
          <div className="flex w-full max-w-[80%] flex-col gap-2">
            <ChatMessageEdit
              aria-label="Редактировать сообщение"
              onCancel={() => setEditing(false)}
              onChange={(event) => setDraft(event.target.value)}
              onSave={save}
              value={draft}
            />
            <ChatMessageEditActions
              onCancel={() => setEditing(false)}
              onSave={() => save(draft)}
            />
          </div>
        ) : (
          <>
            <ChatMessageContent>{content}</ChatMessageContent>
            <ChatMessageActions variant="user">
              <ChatMessageAction
                label="Редактировать"
                onClick={() => {
                  setDraft(content);
                  setEditing(true);
                }}
              >
                <IconPencil aria-hidden="true" stroke={1.5} />
              </ChatMessageAction>
              <ChatMessageAction label="Копировать">
                <IconCopy aria-hidden="true" stroke={1.5} />
              </ChatMessageAction>
            </ChatMessageActions>
          </>
        )}
      </ChatMessage>

      <ChatMessage from="assistant">
        <ChatMessageContent>
          Нажмите карандаш у сообщения выше, чтобы открыть инлайн-редактор.
          Enter сохраняет, Shift+Enter — перенос строки, Escape — отмена.
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

"use client";

import {
  ChatMessage,
  ChatMessageBranch,
  ChatMessageBranchContent,
  ChatMessageBranchControls,
  ChatMessageBranchNext,
  ChatMessageBranchPage,
  ChatMessageBranchPrevious,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-6 p-4">
      <ChatMessage from="user">
        <ChatMessageContent>Объясни замыкания в JavaScript</ChatMessageContent>
      </ChatMessage>

      <ChatMessage from="assistant">
        <ChatMessageBranch defaultBranch={0}>
          <ChatMessageBranchContent>
            <ChatMessageContent>
              Замыкание — это функция, которая помнит окружение, в котором была
              создана: она сохраняет доступ к переменным внешней области даже
              после того, как та завершилась.
            </ChatMessageContent>
            <ChatMessageContent>
              Если коротко: внутренняя функция «захватывает» переменные внешней
              функции. Это даёт приватное состояние без классов.
            </ChatMessageContent>
            <ChatMessageContent>
              Представь рюкзак: функция уносит с собой переменные из места
              своего рождения и достаёт их при каждом вызове.
            </ChatMessageContent>
          </ChatMessageBranchContent>
          <ChatMessageBranchControls>
            <ChatMessageBranchPrevious />
            <ChatMessageBranchPage />
            <ChatMessageBranchNext />
          </ChatMessageBranchControls>
        </ChatMessageBranch>
      </ChatMessage>
    </div>
  );
}

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import {
  ChatMessage,
  ChatMessageContent,
  ChatMessageScrollButton,
} from "@/components/ui/chat-message";

const TURNS = [
  [
    "Покажи план миграции на Base UI",
    "Разбил миграцию на четыре фазы: аудит, токены, примитивы, particles.",
  ],
  [
    "С чего начать?",
    "Начни с токенов — они снимают большинство хардкод-цветов сразу.",
  ],
  [
    "А что с radius?",
    "Radius lg = 0.5rem (8px). Используй шкалу sm/md/lg/xl/2xl везде.",
  ],
  ["Сколько займёт?", "Около спринта на ядро и ещё один на частные экраны."],
  ["Спасибо!", "Обращайся — допишу чек-лист, если нужно."],
];

export default function Particle() {
  const ref = useRef<HTMLDivElement>(null);
  const [isAtBottom, setIsAtBottom] = useState(true);

  const updatePin = useCallback(() => {
    const el = ref.current;
    if (!el) return;
    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
    setIsAtBottom(distance < 48);
  }, []);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    updatePin();
    el.addEventListener("scroll", updatePin, { passive: true });
    return () => el.removeEventListener("scroll", updatePin);
  }, [updatePin]);

  const scrollToBottom = () => {
    const el = ref.current;
    if (!el) return;
    el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
  };

  return (
    <div className="relative w-full max-w-2xl">
      <div
        className="flex max-h-80 flex-col gap-8 overflow-y-auto rounded-xl border bg-background p-4"
        ref={ref}
      >
        {TURNS.map(([user, ai]) => (
          <div className="flex flex-col gap-8" key={user}>
            <ChatMessage from="user">
              <ChatMessageContent>{user}</ChatMessageContent>
            </ChatMessage>
            <ChatMessage from="assistant">
              <ChatMessageContent>{ai}</ChatMessageContent>
            </ChatMessage>
          </div>
        ))}
      </div>
      {!isAtBottom ? (
        <div className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2">
          <ChatMessageScrollButton onClick={scrollToBottom} />
        </div>
      ) : null}
    </div>
  );
}

"use client";

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

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

  return (
    <div className="flex w-full max-w-2xl flex-col gap-4 p-4">
      <ChatMessage from="assistant">
        <ChatMessageContent>
          Выделите любой фрагмент этого ответа мышью — над выделением появится
          тёмная пилюля «Ответить». Клик по ней передаст выбранный текст в
          обработчик как цитату, ровно как в живом чате. Тулбар реагирует только
          на выделение внутри тела ассистента.
        </ChatMessageContent>
      </ChatMessage>

      <ChatMessage from="user">
        <ChatMessageContent>
          А по этому пузырю выделение тулбар не покажет.
        </ChatMessageContent>
      </ChatMessage>

      {excerpt ? (
        <div className="rounded-lg border bg-muted px-3 py-2 text-muted-foreground text-sm">
          Цитата в композер: «{excerpt}»
        </div>
      ) : (
        <div className="rounded-lg border border-dashed px-3 py-2 text-muted-foreground text-sm">
          Выделите текст ответа, чтобы увидеть цитату здесь.
        </div>
      )}

      <ChatMessageSelectionReply onReply={setExcerpt} />
    </div>
  );
}

"use client";

import { IconCopy, IconRefresh } from "@tabler/icons-react";
import { useEffect, useState } from "react";
import {
  ChatMessage,
  ChatMessageAction,
  ChatMessageActions,
  ChatMessageContent,
  ChatMessageTime,
} from "@/components/ui/chat-message";

export default function Particle() {
  const [now, setNow] = useState<number | null>(null);
  useEffect(() => setNow(Date.now()), []);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-10 p-4">
      <ChatMessage from="assistant">
        <ChatMessageContent>
          Это прошлый ответ в ленте. Ряд действий скрыт по умолчанию и
          проявляется только при наведении на сообщение.
        </ChatMessageContent>
        <ChatMessageActions variant="assistant" visibility="hover">
          <ChatMessageAction label="Копировать">
            <IconCopy aria-hidden="true" stroke={1.5} />
          </ChatMessageAction>
          <ChatMessageTime now={now} ts={Date.now() - 1000 * 60 * 60 * 2} />
        </ChatMessageActions>
      </ChatMessage>

      <ChatMessage from="assistant">
        <ChatMessageContent>
          Это последний ответ. Здесь ряд действий закреплён и виден всегда,
          включая кнопку перегенерации.
        </ChatMessageContent>
        <ChatMessageActions variant="assistant" visibility="always">
          <ChatMessageAction label="Копировать">
            <IconCopy aria-hidden="true" stroke={1.5} />
          </ChatMessageAction>
          <ChatMessageAction label="Перегенерировать">
            <IconRefresh aria-hidden="true" stroke={1.5} />
          </ChatMessageAction>
          <ChatMessageTime now={now} ts={Date.now() - 1000 * 12} />
        </ChatMessageActions>
      </ChatMessage>
    </div>
  );
}

"use client";

import {
  ChatMessage,
  ChatMessageAttachment,
  ChatMessageAttachments,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  const open = (label: string) => () => {
    window.alert(`Открыть превью: ${label}`);
  };

  return (
    <div className="flex w-full max-w-2xl flex-col gap-4 p-4">
      <ChatMessage from="user">
        <ChatMessageAttachments>
          <ChatMessageAttachment
            name="diagram.png"
            onClick={open("diagram.png")}
            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=240&q=80"
            variant="image"
          />
          <ChatMessageAttachment
            ext="PDF"
            meta="отчёт"
            name="quarterly-report-2024.pdf"
            onClick={open("quarterly-report-2024.pdf")}
            variant="file"
          />
          <ChatMessageAttachment
            ext="TXT"
            meta="248 строк"
            name="server-config-notes.txt"
            onClick={open("server-config-notes.txt")}
            variant="file"
          />
        </ChatMessageAttachments>
        <ChatMessageContent>
          Посмотри вложения и подскажи, что не так с конфигом.
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

"use client";

import {
  ChatMessage,
  ChatMessageAttachments,
  ChatMessageContent,
  ChatMessageQuote,
} from "@/components/ui/chat-message";

const PASTED_PREVIEW = `import { createServer } from "node:http";

const server = createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("hello world");
});

server.listen(3000);`;

const EXCERPT_PREVIEW =
  "Транзакции в этой схеме изолируются на уровне SERIALIZABLE, поэтому два параллельных перевода между одними и теми же счетами никогда не приведут к двойному списанию — движок откатит более позднюю транзакцию с ошибкой сериализации.";

export default function Particle() {
  const preview = (label: string) => () => {
    window.alert(`Открыть превью: ${label}`);
  };

  return (
    <div className="flex w-full max-w-2xl flex-col gap-6 p-4">
      {/* Pasted-text tile with the PASTED badge, in a user attachment row. */}
      <ChatMessage from="user">
        <ChatMessageAttachments>
          <ChatMessageQuote
            badge="Вставлено"
            onClick={preview("вставленный текст")}
            preview={PASTED_PREVIEW}
            title="Вставленный текст"
            variant="pasted"
          />
        </ChatMessageAttachments>
        <ChatMessageContent>
          Объясни, что делает этот фрагмент.
        </ChatMessageContent>
      </ChatMessage>

      {/* Quoted excerpt of a previous assistant answer (block-quote pill). */}
      <ChatMessage from="user">
        <ChatMessageQuote
          onClick={preview("цитата из ответа")}
          preview={EXCERPT_PREVIEW}
          title="Цитата из ответа"
          variant="excerpt"
        />
        <ChatMessageContent>
          А что будет при уровне READ COMMITTED?
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}