Обзор
Компоненты
- 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 Queue
Список задач агента с секциями pending/completed, статусами и attachments.
- Отрефакторить middleware авторизацииСделать так, чтобы rateLimit возвращал 429 при исчерпании квотыapp/api/auth/route.tsapp/api/auth/rate-limit.ts
- Добавить миграцию для новой таблицы sessions
import {
ChatQueue,
ChatQueueItem,
ChatQueueItemAction,
ChatQueueItemActions,
ChatQueueItemAttachments,
ChatQueueItemDescription,
ChatQueueItemFile,
ChatQueueItemIndicator,
ChatQueueItemRow,
ChatQueueItemTitle,
ChatQueueSection,
ChatQueueSectionContent,
ChatQueueSectionTrigger,
} from "@/components/ui/chat-queue";
export default function Particle() {
return (
<div className="w-full max-w-xl p-4">
<ChatQueue>
<ChatQueueSection defaultOpen>
<ChatQueueSectionTrigger count={2} label="В работе" />
<ChatQueueSectionContent>
<ChatQueueItem status="running">
<ChatQueueItemRow>
<ChatQueueItemIndicator status="running" />
<ChatQueueItemTitle>
Отрефакторить middleware авторизации
</ChatQueueItemTitle>
<ChatQueueItemActions>
<ChatQueueItemAction label="Удалить" />
</ChatQueueItemActions>
</ChatQueueItemRow>
<ChatQueueItemDescription>
Сделать так, чтобы rateLimit возвращал 429 при исчерпании квоты
</ChatQueueItemDescription>
<ChatQueueItemAttachments>
<ChatQueueItemFile>app/api/auth/route.ts</ChatQueueItemFile>
<ChatQueueItemFile>
app/api/auth/rate-limit.ts
</ChatQueueItemFile>
</ChatQueueItemAttachments>
</ChatQueueItem>
<ChatQueueItem status="pending">
<ChatQueueItemRow>
<ChatQueueItemIndicator status="pending" />
<ChatQueueItemTitle>
Добавить миграцию для новой таблицы sessions
</ChatQueueItemTitle>
<ChatQueueItemActions>
<ChatQueueItemAction label="Удалить" />
</ChatQueueItemActions>
</ChatQueueItemRow>
</ChatQueueItem>
</ChatQueueSectionContent>
</ChatQueueSection>
<ChatQueueSection defaultOpen={false}>
<ChatQueueSectionTrigger count={3} label="Завершено" />
<ChatQueueSectionContent>
<ChatQueueItem status="completed">
<ChatQueueItemRow>
<ChatQueueItemIndicator status="completed" />
<ChatQueueItemTitle completed>
Настроить монорепозиторий и turbo
</ChatQueueItemTitle>
</ChatQueueItemRow>
</ChatQueueItem>
<ChatQueueItem status="completed">
<ChatQueueItemRow>
<ChatQueueItemIndicator status="completed" />
<ChatQueueItemTitle completed>
Перевести Tailwind на v4
</ChatQueueItemTitle>
</ChatQueueItemRow>
</ChatQueueItem>
<ChatQueueItem status="failed">
<ChatQueueItemRow>
<ChatQueueItemIndicator status="failed" />
<ChatQueueItemTitle>Preview-деплой для #482</ChatQueueItemTitle>
</ChatQueueItemRow>
<ChatQueueItemDescription>
Сборка упала — смотрите логи
</ChatQueueItemDescription>
</ChatQueueItem>
</ChatQueueSectionContent>
</ChatQueueSection>
</ChatQueue>
</div>
);
}
Установка
pnpm dlx shadcn@latest add @oracul/chat-queue
Использование
import {
ChatQueue,
ChatQueueItem,
ChatQueueItemAction,
ChatQueueItemActions,
ChatQueueItemAttachments,
ChatQueueItemDescription,
ChatQueueItemFile,
ChatQueueItemIndicator,
ChatQueueItemRow,
ChatQueueItemTitle,
ChatQueueSection,
ChatQueueSectionContent,
ChatQueueSectionTrigger,
} from "@/components/ui/chat-queue";
<ChatQueue>
<ChatQueueSection defaultOpen>
<ChatQueueSectionTrigger count={2} label="Pending" />
<ChatQueueSectionContent>
<ChatQueueItem status="running">
<ChatQueueItemRow>
<ChatQueueItemIndicator status="running" />
<ChatQueueItemTitle>Refactor auth middleware</ChatQueueItemTitle>
<ChatQueueItemActions>
<ChatQueueItemAction label="Remove" />
</ChatQueueItemActions>
</ChatQueueItemRow>
<ChatQueueItemDescription>
Make rateLimit throw 429 on quota exhausted
</ChatQueueItemDescription>
<ChatQueueItemAttachments>
<ChatQueueItemFile>app/api/auth/route.ts</ChatQueueItemFile>
</ChatQueueItemAttachments>
</ChatQueueItem>
</ChatQueueSectionContent>
</ChatQueueSection>
<ChatQueueSection defaultOpen={false}>
<ChatQueueSectionTrigger count={4} label="Completed" />
<ChatQueueSectionContent>
<ChatQueueItem status="completed">
<ChatQueueItemRow>
<ChatQueueItemIndicator status="completed" />
<ChatQueueItemTitle completed>Set up monorepo</ChatQueueItemTitle>
</ChatQueueItemRow>
</ChatQueueItem>
</ChatQueueSectionContent>
</ChatQueueSection>
</ChatQueue>Статусы элемента
status | Точка |
|---|---|
pending | пустой круг |
running | синяя + пульсация |
completed | заполненная muted |
failed | destructive |
Действия
<ChatQueueItemActions> показываются только при наведении на элемент — без визуального шума в обычном состоянии.
На этой странице