Chat Connector Detail

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  ChatConnectorDetail,
  type ConnectorToolGroup,
  type ConnectorToolPerm,
} from "@/components/ui/chat-connector-detail";
import { MenuItem } from "@/components/ui/menu";

const INITIAL: ConnectorToolGroup[] = [
  {
    id: "read",
    label: "Только чтение",
    tools: [
      {
        name: "yadisk_disk_info",
        perm: "allow",
        description:
          "Get general information about the user's Yandex Disk (quota, usage).",
      },
      {
        name: "yadisk_get_download_link",
        perm: "allow",
        description: "Get a direct download URL for a file on Yandex Disk.",
      },
      {
        name: "yadisk_list",
        perm: "allow",
        description: "List files and folders on Yandex Disk at the given path.",
      },
    ],
  },
  {
    id: "write",
    label: "Запись / удаление",
    tools: [
      {
        name: "yadisk_publish",
        perm: "approval",
        description:
          "Publish a file or folder on Yandex Disk and return its public link.",
      },
      {
        name: "yadisk_upload",
        perm: "approval",
        description: "Upload a file to Yandex Disk.",
      },
    ],
  },
];

const Icon = (
  <span className="flex size-full items-center justify-center bg-[oklch(0.62_0.19_27)] font-semibold text-white text-xs">
    Я
  </span>
);

export default function Particle() {
  const [connected, setConnected] = useState(true);
  const [groups, setGroups] = useState(INITIAL);

  const setToolPerm = (
    groupId: string,
    toolName: string,
    perm: ConnectorToolPerm,
  ) =>
    setGroups((gs) =>
      gs.map((g) =>
        g.id === groupId
          ? {
              ...g,
              tools: g.tools.map((t) =>
                t.name === toolName ? { ...t, perm } : t,
              ),
            }
          : g,
      ),
    );

  const setGroupPolicy = (
    groupId: string,
    perm: ConnectorToolPerm | "custom",
  ) =>
    setGroups((gs) =>
      gs.map((g) =>
        g.id === groupId && perm !== "custom"
          ? { ...g, tools: g.tools.map((t) => ({ ...t, perm })) }
          : g,
      ),
    );

  return (
    <div className="flex w-full max-w-160 flex-col gap-3">
      <Button
        className="self-start"
        onClick={() => setConnected((v) => !v)}
        size="sm"
        variant="outline"
      >
        {connected ? "Показать «не подключён»" : "Показать «подключён»"}
      </Button>
      <div className="h-140 overflow-hidden rounded-xl border bg-popover shadow-lg/5">
        <ChatConnectorDetail
          connected={connected}
          description="Файлы и папки на Яндекс Диске со входом через Яндекс (OAuth). Как у Miro: нажми «Подключить», подтверди доступ в окне Яндекса."
          groups={groups}
          icon={Icon}
          menu={
            <>
              <MenuItem>Подробности</MenuItem>
              <MenuItem>Обновить список инструментов</MenuItem>
              <MenuItem variant="destructive">Удалить</MenuItem>
            </>
          }
          name="Яндекс Диск (OAuth)"
          onClose={() => {}}
          onConnect={() => setConnected(true)}
          onDisconnect={() => setConnected(false)}
          onGroupPolicyChange={setGroupPolicy}
          onToolPermChange={setToolPerm}
        />
      </div>
    </div>
  );
}