Обзор
Компоненты
- 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 Commit
Карточка git-коммита с заголовком, автором, временем и списком изменённых файлов.
Mapp/products/[id]/page.tsx
426
Aapp/lib/cache.ts
156
Dapp/lib/revalidate.ts
88
Rapp/lib/old-cache.ts
import {
ChatCommit,
ChatCommitActions,
ChatCommitAuthor,
ChatCommitAvatar,
ChatCommitContent,
ChatCommitCopyHashButton,
ChatCommitFile,
ChatCommitHash,
ChatCommitHeader,
ChatCommitInfo,
ChatCommitMessage,
ChatCommitMetadata,
ChatCommitSeparator,
ChatCommitTimestamp,
} from "@/components/ui/chat-commit";
const commitDate = new Date(Date.now() - 36 * 60 * 60 * 1000);
export default function Particle() {
return (
<div className="w-full max-w-2xl p-4">
<ChatCommit defaultOpen>
<ChatCommitHeader>
<ChatCommitInfo>
<ChatCommitMessage>
feat: добавить основной API Cache Components
</ChatCommitMessage>
<ChatCommitMetadata>
<ChatCommitHash>a1b2c3d</ChatCommitHash>
<ChatCommitSeparator />
<ChatCommitAuthor>
<ChatCommitAvatar initials="МВ" />
Михаил Воробьёв
</ChatCommitAuthor>
<ChatCommitSeparator />
<ChatCommitTimestamp date={commitDate} />
</ChatCommitMetadata>
</ChatCommitInfo>
<ChatCommitActions>
<ChatCommitCopyHashButton hash="a1b2c3d4e5f6g7h8" />
</ChatCommitActions>
</ChatCommitHeader>
<ChatCommitContent>
<ChatCommitFile
additions={42}
deletions={6}
path="app/products/[id]/page.tsx"
status="modified"
/>
<ChatCommitFile
additions={156}
path="app/lib/cache.ts"
status="added"
/>
<ChatCommitFile
deletions={88}
path="app/lib/revalidate.ts"
status="deleted"
/>
<ChatCommitFile path="app/lib/old-cache.ts" status="renamed" />
</ChatCommitContent>
</ChatCommit>
</div>
);
}
Установка
bun npm pnpm yarn pnpm dlx shadcn@latest add @oracul/chat-commitКопировать
Использование
Copy import { ChatCommit, ChatCommitActions, ChatCommitAuthor, ChatCommitAvatar, ChatCommitContent, ChatCommitCopyHashButton, ChatCommitFile, ChatCommitHash, ChatCommitHeader, ChatCommitInfo, ChatCommitMessage, ChatCommitMetadata, ChatCommitSeparator, ChatCommitTimestamp, } from "@/components/ui/chat-commit"; <ChatCommit defaultOpen> <ChatCommitHeader> <ChatCommitInfo> <ChatCommitMessage>feat: introduce Cache Components</ChatCommitMessage> <ChatCommitMetadata> <ChatCommitHash>a1b2c3d</ChatCommitHash> <ChatCommitSeparator /> <ChatCommitAuthor> <ChatCommitAvatar initials="MV" /> Mikhail Vorobyov </ChatCommitAuthor> <ChatCommitSeparator /> <ChatCommitTimestamp date={new Date("2026-05-12")} /> </ChatCommitMetadata> </ChatCommitInfo> <ChatCommitActions> <ChatCommitCopyHashButton hash="a1b2c3d4e5f6" /> </ChatCommitActions> </ChatCommitHeader> <ChatCommitContent> <ChatCommitFile additions={42} path="app/page.tsx" status="modified" /> <ChatCommitFile additions={156} path="app/lib/cache.ts" status="added" /> <ChatCommitFile deletions={88} path="app/lib/revalidate.ts" status="deleted" /> </ChatCommitContent> </ChatCommit>
Статус файла
status | Префикс |
|---|---|
added | A (изумрудный) |
modified | M (янтарный) |
deleted | D (красный) |
renamed | R (синий) |
Время рендерится через Intl.RelativeTimeFormat — «2 дня назад» / «через 3 часа».
На этой странице