Chat Token Chip

"use client";

import { IconBrandGithub } from "@tabler/icons-react";
import { useState } from "react";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";
import { ChatTokenChip } from "@/components/ui/chat-token-chip";

const SKILL_DESCRIPTION =
  "Сжимает длинные документы в краткую выжимку: выделяет основной тезис, ключевые аргументы и открытые вопросы, а затем оформляет их в виде удобного списка, готового для вставки в отчёт.";

export default function Particle() {
  const [opened, setOpened] = useState<string | null>(null);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-4 p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="A" />
        <ChatMessageContent>
          <p className="text-sm leading-relaxed">
            Я запущу{" "}
            <ChatTokenChip
              description={SKILL_DESCRIPTION}
              id="summarize"
              kind="skill"
              label="/summarize"
              onOpen={(kind, id) => setOpened(`${kind}:${id}`)}
              typeLabel="Навык"
            />{" "}
            на спецификации, а затем синхронизирую результаты с{" "}
            <ChatTokenChip
              description="Подключается к вашему рабочему пространству GitHub, чтобы я мог читать задачи, открывать пул-реквесты и комментировать ревью от вашего имени."
              icon={<IconBrandGithub stroke={1.5} />}
              id="github"
              kind="connector"
              label="@github"
              onOpen={(kind, id) => setOpened(`${kind}:${id}`)}
              typeLabel="Коннектор"
            />
            . У навыка{" "}
            <ChatTokenChip
              id="lint"
              kind="skill"
              label="/lint"
              onOpen={(kind, id) => setOpened(`${kind}:${id}`)}
              typeLabel="Навык"
            />{" "}
            нет описания, поэтому на его карточке отображается только метка
            типа. Коннектор{" "}
            <ChatTokenChip
              description="Этот коннектор недоступен на вашем текущем тарифе, поэтому его можно посмотреть, но нельзя вызвать."
              disabled
              id="deploy"
              kind="connector"
              label="@deploy"
              onOpen={(kind, id) => setOpened(`${kind}:${id}`)}
              typeLabel="Коннектор"
            />{" "}
            отключён: его карточка по-прежнему показывается при наведении, но он
            недоступен для фокуса и активации.
          </p>
        </ChatMessageContent>
      </ChatMessage>

      <p
        aria-live="polite"
        className="text-muted-foreground text-xs"
        data-slot="preview-status"
      >
        {opened
          ? `Открыта карточка: ${opened}`
          : "Наведите курсор или сфокусируйтесь на чипе, чтобы увидеть его карточку — нажмите, чтобы открыть."}
      </p>
    </div>
  );
}