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> показываются только при наведении на элемент — без визуального шума в обычном состоянии.

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

Установка Использование Статусы элемента Действия