Chat Confirmation

"use client";

import { useState } from "react";
import {
  type ChatConfirmationState,
  ToolPermissionCard,
} from "@/components/ui/chat-confirmation";

const ARGS_PREVIEW = JSON.stringify(
  {
    query: "токены дизайн-системы",
    board: "Oracul DS — Основы",
    limit: 20,
  },
  null,
  2,
);

export default function Particle() {
  const [state, setState] = useState<ChatConfirmationState>("pending");

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <ToolPermissionCard
        allowOnceLabel="Разрешить один раз"
        alwaysAllowLabel="Всегда разрешать"
        approvedLabel="Разрешено"
        argsPreview={ARGS_PREVIEW}
        connectorLabel="Miro"
        connectorPrefix="из"
        denyLabel="Отклонить"
        iconUrl="https://www.google.com/s2/favicons?sz=64&domain=miro.com"
        moreOptionsLabel="Ещё"
        onAllowOnce={() => setState("approved")}
        onAlwaysAllow={() => setState("approved")}
        onDeny={() => setState("rejected")}
        reason="Вы отклонили этот вызов инструмента."
        state={state}
        titlePrefix="Хочет использовать"
        toolLabel="Context Explore"
      />

      {state !== "pending" ? (
        <button
          className="self-start text-muted-foreground text-xs underline"
          onClick={() => setState("pending")}
          type="button"
        >
          Сбросить
        </button>
      ) : null}
    </div>
  );
}

"use client";

import { ToolPermissionCard } from "@/components/ui/chat-confirmation";

const noop = () => {};

export default function Particle() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {/* Pending — generic Plug icon, no connector, non-expandable (no args). */}
      <ToolPermissionCard
        onAllowOnce={noop}
        onAlwaysAllow={noop}
        onDeny={noop}
        state="pending"
        toolLabel="Показать файлы"
      />

      {/* Approved — compact resolved success row. */}
      <ToolPermissionCard
        connectorLabel="GitHub"
        iconUrl="https://www.google.com/s2/favicons?sz=64&domain=github.com"
        onAllowOnce={noop}
        onAlwaysAllow={noop}
        onDeny={noop}
        state="approved"
        toolLabel="Создать задачу"
      />

      {/* Rejected — compact resolved row with a custom reason. */}
      <ToolPermissionCard
        connectorLabel="Linear"
        iconUrl="https://www.google.com/s2/favicons?sz=64&domain=linear.app"
        onAllowOnce={noop}
        onAlwaysAllow={noop}
        onDeny={noop}
        reason="Выходит за рамки этой задачи."
        state="rejected"
        toolLabel="Удалить проект"
      />
    </div>
  );
}

"use client";

import { useState } from "react";
import {
  ChatConfirmation,
  ChatConfirmationAction,
  ChatConfirmationActions,
  type ChatConfirmationApproval,
  ChatConfirmationApproved,
  ChatConfirmationPending,
  ChatConfirmationReason,
  ChatConfirmationRejected,
  ChatConfirmationTitle,
} from "@/components/ui/chat-confirmation";

export default function Particle() {
  const [approval, setApproval] = useState<ChatConfirmationApproval>({});

  return (
    <div className="flex w-full max-w-md flex-col gap-3 p-4">
      <ChatConfirmation approval={approval}>
        <ChatConfirmationTitle>
          Разрешить агенту выполнить <code>rm -rf node_modules</code>?
        </ChatConfirmationTitle>

        <ChatConfirmationPending>
          <p className="text-muted-foreground text-xs">
            Это удалит <code>node_modules</code> в корне проекта.
          </p>
          <ChatConfirmationActions>
            <ChatConfirmationAction
              onClick={() =>
                setApproval({
                  approved: false,
                  reason: "Пользователь отменил очистку.",
                })
              }
              variant="ghost"
            >
              Отклонить
            </ChatConfirmationAction>
            <ChatConfirmationAction
              onClick={() => setApproval({ approved: true })}
            >
              Разрешить
            </ChatConfirmationAction>
          </ChatConfirmationActions>
        </ChatConfirmationPending>

        <ChatConfirmationApproved>
          <p className="text-success text-xs">
            Разрешено · агент выполняет команду.
          </p>
        </ChatConfirmationApproved>

        <ChatConfirmationRejected>
          <p className="text-destructive text-xs">Действие отклонено.</p>
          <ChatConfirmationReason />
        </ChatConfirmationRejected>
      </ChatConfirmation>

      {approval.approved !== undefined ? (
        <button
          className="self-start text-muted-foreground text-xs underline"
          onClick={() => setApproval({})}
          type="button"
        >
          Сбросить
        </button>
      ) : null}
    </div>
  );
}