Chat Inline Citation

import {
  ChatInlineCitation,
  ChatInlineCitationBadge,
  ChatInlineCitationCard,
  ChatInlineCitationCardBody,
  ChatInlineCitationCardTrigger,
  ChatInlineCitationCarousel,
  ChatInlineCitationCarouselContent,
  ChatInlineCitationCarouselHeader,
  ChatInlineCitationCarouselIndex,
  ChatInlineCitationCarouselItem,
  ChatInlineCitationCarouselNext,
  ChatInlineCitationCarouselPrev,
  ChatInlineCitationQuote,
  ChatInlineCitationSource,
  ChatInlineCitationText,
} from "@/components/ui/chat-inline-citation";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

const cite = [
  {
    url: "https://nextjs.org/docs/app/getting-started/cache-components",
    title: "Cache Components",
    description:
      "Cache Components позволяют кешировать результат рендеринга серверного компонента и переиспользовать его между запросами.",
    quote: "Теперь кеширование учитывает компоненты.",
  },
  {
    url: "https://react.dev/reference/rsc/server-components",
    title: "Server Components — react.dev",
    description:
      "React Server Components позволяют рендерить интерфейс на сервере и стримить его клиенту без отправки JavaScript.",
    quote: "Нулевой бандл по умолчанию.",
  },
];

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <p className="text-sm leading-relaxed">
            <ChatInlineCitation>
              <ChatInlineCitationText>
                Cache Components в Next.js 16 расширяют RSC — они кешируют
                рендер компонента целиком
              </ChatInlineCitationText>
              <ChatInlineCitationCard>
                <ChatInlineCitationCardTrigger>
                  <ChatInlineCitationBadge sources={cite.map((c) => c.url)} />
                </ChatInlineCitationCardTrigger>
                <ChatInlineCitationCardBody>
                  <ChatInlineCitationCarousel>
                    <ChatInlineCitationCarouselHeader>
                      <ChatInlineCitationCarouselPrev />
                      <ChatInlineCitationCarouselIndex />
                      <ChatInlineCitationCarouselNext />
                    </ChatInlineCitationCarouselHeader>
                    <ChatInlineCitationCarouselContent>
                      {cite.map((c) => (
                        <ChatInlineCitationCarouselItem key={c.url}>
                          <ChatInlineCitationSource
                            description={c.description}
                            title={c.title}
                            url={c.url}
                          />
                          <ChatInlineCitationQuote>
                            {c.quote}
                          </ChatInlineCitationQuote>
                        </ChatInlineCitationCarouselItem>
                      ))}
                    </ChatInlineCitationCarouselContent>
                  </ChatInlineCitationCarousel>
                </ChatInlineCitationCardBody>
              </ChatInlineCitationCard>
            </ChatInlineCitation>
            .
          </p>
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}