Chat Checkpoint

Inline-маркер сохранённого состояния беседы между сообщениями.

Объясни Cache Components в Next.js 16.

Cache Components кешируют рендер компонента через "use cache". Инвалидация — через updateTag.

Сохранено · 14:02

А как мигрировать с старого revalidate?

Заменяешь старый fetch(url, { next: { revalidate } }) на "use cache" + cacheTag, и вместо TTL-инвалидации вручную дёргаешь updateTag в server action.

import {
  ChatCheckpoint,
  ChatCheckpointIcon,
  ChatCheckpointLabel,
  ChatCheckpointTrigger,
} from "@/components/ui/chat-checkpoint";
import {
  ChatConversation,
  ChatConversationContent,
} from "@/components/ui/chat-conversation";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  return (
    <div className="h-105 w-full max-w-2xl p-4">
      <ChatConversation>
        <ChatConversationContent>
          <ChatMessage from="user">
            <ChatMessageContent>
              Объясни Cache Components в Next.js 16.
            </ChatMessageContent>
          </ChatMessage>

          <ChatMessage from="assistant">
            <ChatMessageAvatar fallback="J" />
            <ChatMessageContent>
              <p>
                Cache Components кешируют рендер компонента через{" "}
                <code>&quot;use cache&quot;</code>. Инвалидация — через{" "}
                <code>updateTag</code>.
              </p>
            </ChatMessageContent>
          </ChatMessage>

          <ChatCheckpoint>
            <ChatCheckpointIcon />
            <ChatCheckpointLabel>Сохранено · 14:02</ChatCheckpointLabel>
            <ChatCheckpointTrigger>Восстановить</ChatCheckpointTrigger>
          </ChatCheckpoint>

          <ChatMessage from="user">
            <ChatMessageContent>
              А как мигрировать с старого revalidate?
            </ChatMessageContent>
          </ChatMessage>

          <ChatMessage from="assistant">
            <ChatMessageAvatar fallback="J" />
            <ChatMessageContent>
              <p>
                Заменяешь старый{" "}
                <code>
                  fetch(url, &#123; next: &#123; revalidate &#125; &#125;)
                </code>{" "}
                на <code>&quot;use cache&quot;</code> + <code>cacheTag</code>, и
                вместо TTL-инвалидации вручную дёргаешь <code>updateTag</code> в
                server action.
              </p>
            </ChatMessageContent>
          </ChatMessage>
        </ChatConversationContent>
      </ChatConversation>
    </div>
  );
}

Установка


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

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

Вставляй между <ChatMessage> в <ChatConversationContent>, чтобы пометить точку, откуда можно вернуться.

import {
  ChatCheckpoint,
  ChatCheckpointIcon,
  ChatCheckpointLabel,
  ChatCheckpointTrigger,
} from "@/components/ui/chat-checkpoint";
 
<ChatConversation>
  <ChatConversationContent>
    <ChatMessage from="user">…</ChatMessage>
    <ChatMessage from="assistant">…</ChatMessage>
 
    <ChatCheckpoint>
      <ChatCheckpointIcon />
      <ChatCheckpointLabel>Saved Mar 12, 14:02</ChatCheckpointLabel>
      <ChatCheckpointTrigger onClick={() => restore(checkpoint.id)}>
        Restore
      </ChatCheckpointTrigger>
    </ChatCheckpoint>
 
    <ChatMessage from="user">…</ChatMessage>
  </ChatConversationContent>
</ChatConversation>

Стилизация

Корень рендерит горизонтальные линии слева и справа от children (через ::before / ::after), создавая мини-разделитель в timeline. Children — иконка + label + опциональный trigger.

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

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