Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
Chat Inline Citation
Inline-цитата с popover, в которой карусель источников.
J
Cache Components в Next.js 16 расширяют RSC — они кешируют рендер компонента целиком.
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>
);
}
Установка
pnpm dlx shadcn@latest add @oracul/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";
<ChatInlineCitation>
<ChatInlineCitationText>
Next.js 16 поддерживает Cache Components
</ChatInlineCitationText>
<ChatInlineCitationCard>
<ChatInlineCitationCardTrigger>
<ChatInlineCitationBadge sources={[url1, url2]} />
</ChatInlineCitationCardTrigger>
<ChatInlineCitationCardBody>
<ChatInlineCitationCarousel>
<ChatInlineCitationCarouselHeader>
<ChatInlineCitationCarouselPrev />
<ChatInlineCitationCarouselIndex />
<ChatInlineCitationCarouselNext />
</ChatInlineCitationCarouselHeader>
<ChatInlineCitationCarouselContent>
<ChatInlineCitationCarouselItem>
<ChatInlineCitationSource
description="…"
title="Next.js Cache Components"
url={url1}
/>
<ChatInlineCitationQuote>…</ChatInlineCitationQuote>
</ChatInlineCitationCarouselItem>
<ChatInlineCitationCarouselItem>…</ChatInlineCitationCarouselItem>
</ChatInlineCitationCarouselContent>
</ChatInlineCitationCarousel>
</ChatInlineCitationCardBody>
</ChatInlineCitationCard>
</ChatInlineCitation>Заметка
Внутри карусели — не Embla, а минимальный собственный indexed-controller. Это сделано чтобы не тащить в Oracul DS отдельную карусельную зависимость. API совместим с подходом Vercel AI Elements.
На этой странице