Chat File Card

Плашка файла/артефакта в ленте чата с «пружинной» плиткой-документом, заголовком, подписью и действиями.

Маркетинговое исследование за III квартал

Исследование · 12 страниц

"use client";

import { IconDownload, IconFileText } from "@tabler/icons-react";
import {
  ChatFileCard,
  ChatFileCardAction,
  ChatFileCardActions,
  ChatFileCardContent,
  ChatFileCardIcon,
  ChatFileCardSubtitle,
  ChatFileCardTitle,
} from "@/components/ui/chat-file-card";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <ChatFileCard
            className="w-full"
            onOpen={() => {}}
            openLabel="Маркетинговое исследование за III квартал"
          >
            <ChatFileCardIcon>
              <IconFileText aria-hidden="true" stroke={1.5} />
            </ChatFileCardIcon>
            <ChatFileCardContent>
              <ChatFileCardTitle title="Маркетинговое исследование за III квартал">
                Маркетинговое исследование за III квартал
              </ChatFileCardTitle>
              <ChatFileCardSubtitle>
                Исследование · 12 страниц
              </ChatFileCardSubtitle>
            </ChatFileCardContent>
            <ChatFileCardActions>
              <ChatFileCardAction iconOnly label="Скачать отчёт">
                <IconDownload aria-hidden="true" stroke={1.5} />
              </ChatFileCardAction>
            </ChatFileCardActions>
          </ChatFileCard>
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-file-card

Использование

import { DownloadIcon, FileTextIcon } from "lucide-react";
import {
  ChatFileCard,
  ChatFileCardAction,
  ChatFileCardActions,
  ChatFileCardContent,
  ChatFileCardIcon,
  ChatFileCardSubtitle,
  ChatFileCardTitle,
} from "@/components/ui/chat-file-card";
 
<ChatFileCard onOpen={() => openPanel()} openLabel="Research report">
  <ChatFileCardIcon>
    <FileTextIcon />
  </ChatFileCardIcon>
  <ChatFileCardContent>
    <ChatFileCardTitle title="Research report">Research report</ChatFileCardTitle>
    <ChatFileCardSubtitle>Research · 12 pages</ChatFileCardSubtitle>
  </ChatFileCardContent>
  <ChatFileCardActions>
    <ChatFileCardAction iconOnly label="Download" onClick={download}>
      <DownloadIcon />
    </ChatFileCardAction>
  </ChatFileCardActions>
</ChatFileCard>

Компонент полностью контролируемый и не зависит от типов приложения: иконка передаётся как children, действия — через render={<a href download />} или onClick, а открытие предпросмотра делегируется колбэку onOpen. interactive выводится из onOpen, но его можно переопределить пропом. Жизненный цикл артефакта задаётся пропом status ("idle" | "loading" | "error").

Композиция

<ChatFileCard> — корневая плашка. Рендерит невидимую кнопку inset-0 поверх карточки, когда есть onOpen (или interactive), и проставляет data-state, aria-pressed, aria-busy. Пропы status и disabled управляют доступностью открытия.
<ChatFileCardIcon> — плитка-«документ» в левом слоте; children — любая иконка. При status="loading" показывает спиннер, при status="error" — предупреждающий значок.
<ChatFileCardContent> — колонка текста (усекаемые ChatFileCardTitle / ChatFileCardSubtitle); ChatFileCardActions располагается рядом, как соседний элемент.
<ChatFileCardActions> + <ChatFileCardAction> — действия. iconOnly переключает квадрат 32×32 и текстовую кнопку; каждое действие останавливает всплытие, чтобы не сработал onOpen карточки. Действия автоматически блокируются при status="loading" и поддерживают индивидуальный disabled.

Состояния

idle — спокойная тёплая подложка (bg-background, в dark — bg-card), плитка слегка наклонена и выглядывает снизу.
hover — при наведении плитка выпрямляется и чуть подрастает (cubic-bezier(0,0.9,0.5,1.35)), поверхность поднимается до bg-card (light) / лёгкого осветления (dark), бордер /15 → /30. Только для интерактивных карточек в состоянии idle.
open / selected — open добавляет aria-pressed, бордер border-foreground/30 и bg-muted/30; перекрывает ховер.
loading / streaming — status="loading" ставит aria-busy, заменяет иконку спиннером, блокирует open-кнопку и все действия, пока файл генерируется.
error — status="error" показывает предупреждающий значок, деструктивный бордер и подложку, и отключает ховер; действие-ретрай остаётся доступным.
disabled — disabled (или status="loading") отключает open-кнопку; disabled на ChatFileCardAction отключает отдельное действие.
non-interactive — без onOpen (или interactive={false}) нет inset-кнопки, курсора-указателя и подъёма поверхности — статичный display-only чип.
actions — одно иконочное действие (iconOnly), текстовая кнопка (например «Save skill»), несколько действий или совсем без действий.
truncation — длинные заголовок и подпись усекаются в одну строку с многоточием; title даёт нативный тултип.
focus-visible — кольцо фокуса (focus-visible:ring-inset, чтобы не обрезалось overflow-hidden карточки) на inset open-кнопке и на каждом действии при навигации с клавиатуры.

Открыта / выбрана

Конвертер csv-to-json

Код · TypeScript

"use client";

import { IconBookmarkPlus, IconCode, IconDownload } from "@tabler/icons-react";
import {
  ChatFileCard,
  ChatFileCardAction,
  ChatFileCardActions,
  ChatFileCardContent,
  ChatFileCardIcon,
  ChatFileCardSubtitle,
  ChatFileCardTitle,
} from "@/components/ui/chat-file-card";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <ChatFileCard
            className="w-full"
            onOpen={() => {}}
            open
            openLabel="Конвертер csv-to-json"
          >
            <ChatFileCardIcon>
              <IconCode aria-hidden="true" stroke={1.5} />
            </ChatFileCardIcon>
            <ChatFileCardContent>
              <ChatFileCardTitle title="Конвертер csv-to-json">
                Конвертер csv-to-json
              </ChatFileCardTitle>
              <ChatFileCardSubtitle>Код · TypeScript</ChatFileCardSubtitle>
            </ChatFileCardContent>
            <ChatFileCardActions>
              <ChatFileCardAction>
                <IconBookmarkPlus aria-hidden="true" stroke={1.5} />
                Сохранить навык
              </ChatFileCardAction>
              <ChatFileCardAction iconOnly label="Скачать исходник">
                <IconDownload aria-hidden="true" stroke={1.5} />
              </ChatFileCardAction>
            </ChatFileCardActions>
          </ChatFileCard>
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

Загрузка

Маркетинговое исследование за III квартал

Создаётся · 12 страниц

"use client";

import { IconDownload, IconFileText } from "@tabler/icons-react";
import {
  ChatFileCard,
  ChatFileCardAction,
  ChatFileCardActions,
  ChatFileCardContent,
  ChatFileCardIcon,
  ChatFileCardSubtitle,
  ChatFileCardTitle,
} from "@/components/ui/chat-file-card";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <ChatFileCard
            className="w-full"
            onOpen={() => {}}
            openLabel="Маркетинговое исследование за III квартал"
            status="loading"
          >
            <ChatFileCardIcon>
              <IconFileText aria-hidden="true" stroke={1.5} />
            </ChatFileCardIcon>
            <ChatFileCardContent>
              <ChatFileCardTitle title="Маркетинговое исследование за III квартал">
                Маркетинговое исследование за III квартал
              </ChatFileCardTitle>
              <ChatFileCardSubtitle>
                Создаётся · 12 страниц
              </ChatFileCardSubtitle>
            </ChatFileCardContent>
            <ChatFileCardActions>
              <ChatFileCardAction iconOnly label="Скачать отчёт">
                <IconDownload aria-hidden="true" stroke={1.5} />
              </ChatFileCardAction>
            </ChatFileCardActions>
          </ChatFileCard>
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

Ошибка

Исследование рынка за III квартал

Не удалось сгенерировать · файл не создан

"use client";

import { IconFileText, IconRotateClockwise } from "@tabler/icons-react";
import {
  ChatFileCard,
  ChatFileCardAction,
  ChatFileCardActions,
  ChatFileCardContent,
  ChatFileCardIcon,
  ChatFileCardSubtitle,
  ChatFileCardTitle,
} from "@/components/ui/chat-file-card";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <ChatFileCard
            className="w-full"
            onOpen={() => {}}
            openLabel="Исследование рынка за III квартал"
            status="error"
          >
            <ChatFileCardIcon>
              {/* Replaced by a warning glyph while status is "error". */}
              <IconFileText aria-hidden="true" stroke={1.5} />
            </ChatFileCardIcon>
            <ChatFileCardContent>
              <ChatFileCardTitle title="Исследование рынка за III квартал">
                Исследование рынка за III квартал
              </ChatFileCardTitle>
              <ChatFileCardSubtitle className="text-destructive">
                Не удалось сгенерировать · файл не создан
              </ChatFileCardSubtitle>
            </ChatFileCardContent>
            <ChatFileCardActions>
              <ChatFileCardAction onClick={() => {}}>
                <IconRotateClockwise aria-hidden="true" stroke={1.5} />
                Повторить
              </ChatFileCardAction>
            </ChatFileCardActions>
          </ChatFileCard>
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

Усечение текста

Годовой обзор финансовых результатов за 2024 год и прогнозы на будущее (финальная версия, утверждено советом директоров)

Таблица · 8 листов · обновлено 2 часа назад командой финансовых операций

"use client";

import { IconDownload, IconFileSpreadsheet } from "@tabler/icons-react";
import {
  ChatFileCard,
  ChatFileCardAction,
  ChatFileCardActions,
  ChatFileCardContent,
  ChatFileCardIcon,
  ChatFileCardSubtitle,
  ChatFileCardTitle,
} from "@/components/ui/chat-file-card";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

const longTitle =
  "Годовой обзор финансовых результатов за 2024 год и прогнозы на будущее (финальная версия, утверждено советом директоров)";
const longSubtitle =
  "Таблица · 8 листов · обновлено 2 часа назад командой финансовых операций";

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <ChatFileCard
            className="w-full"
            onOpen={() => {}}
            openLabel={longTitle}
          >
            <ChatFileCardIcon>
              <IconFileSpreadsheet aria-hidden="true" stroke={1.5} />
            </ChatFileCardIcon>
            <ChatFileCardContent>
              <ChatFileCardTitle title={longTitle}>
                {longTitle}
              </ChatFileCardTitle>
              <ChatFileCardSubtitle title={longSubtitle}>
                {longSubtitle}
              </ChatFileCardSubtitle>
            </ChatFileCardContent>
            <ChatFileCardActions>
              <ChatFileCardAction
                iconOnly
                label="Скачать таблицу"
                render={
                  // biome-ignore lint/a11y/useAnchorContent: icon content is injected by ChatFileCardAction via render
                  <a
                    aria-label="Скачать таблицу"
                    download="annual-financial-review.xlsx"
                    href="#"
                    rel="noreferrer"
                  />
                }
              >
                <IconDownload aria-hidden="true" stroke={1.5} />
              </ChatFileCardAction>
            </ChatFileCardActions>
          </ChatFileCard>
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

Неинтерактивная

обложка.png

Изображение · 1.4 МБ

"use client";

import { IconPhoto } from "@tabler/icons-react";
import {
  ChatFileCard,
  ChatFileCardContent,
  ChatFileCardIcon,
  ChatFileCardSubtitle,
  ChatFileCardTitle,
} from "@/components/ui/chat-file-card";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <ChatFileCard className="w-full">
            <ChatFileCardIcon>
              <IconPhoto aria-hidden="true" stroke={1.5} />
            </ChatFileCardIcon>
            <ChatFileCardContent>
              <ChatFileCardTitle title="обложка.png">
                обложка.png
              </ChatFileCardTitle>
              <ChatFileCardSubtitle>Изображение · 1.4 МБ</ChatFileCardSubtitle>
            </ChatFileCardContent>
          </ChatFileCard>
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

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

Установка Использование Композиция Состояния Открыта / выбрана Загрузка Ошибка Усечение текста Неинтерактивная