Files
cobble/src/pages/admin/bots/[bot_id]/(partials)/composer-add-tool-modal.tsx
T
tbenandClaude Opus 5.5 6294b911e6 Give bots tools and MCP servers per bot and workspace, with status and tests
- Bots and workspaces get tools and MCP servers from their settings
  pages; bots also from chips under the chat composer, removable there
- "Every bot" now gives one to every bot now and every new bot; each can
  still drop it (attach-every-bot-extensions.ts moves old installs over)
- Status lines: MCP servers record whether they connect, tools whether
  their last run worked
- Test connection in the MCP form and a Test panel in the tool form check
  the form as it is, without saving
- Hide Google sign-in on the login form

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-19 15:35:13 +01:00

66 lines
2.4 KiB
TypeScript

import { useState } from "react";
import Modal from "@moduletrace/twui/elements/Modal";
import Button from "@moduletrace/twui/layout/Button";
import H2 from "@moduletrace/twui/layout/H2";
import Span from "@moduletrace/twui/layout/Span";
import Stack from "@moduletrace/twui/layout/Stack";
import { Plus } from "lucide-react";
import ExtensionAddSelect from "@/src/components/general/extension-add-select";
import type { BotExtensionsPayload } from "@/src/types";
type Props = {
bot_name: string;
addable: BotExtensionsPayload["addable"];
loading?: boolean;
onAdd: (params: { kind: "mcp" | "tool"; id: number }) => Promise<boolean>;
};
/**
* The "Add" chip under the composer: picks an MCP server or tool to give
* the bot, everywhere it works.
*/
export default function ComposerAddToolModal({ bot_name, addable, loading, onAdd }: Props) {
const [open, setOpen] = useState(false);
if (!addable.length) return null;
return (
<Modal
target={
<Button
title={`Give ${bot_name} a tool or MCP server`}
type="button"
variant="ghost"
color="gray"
size="small"
beforeIcon={<Plus size={12} aria-hidden />}
className="gap-1! px-2! py-0.5! text-[12px] leading-4"
>
Add
</Button>
}
targetWrapperProps={{ className: "shrink-0" }}
open={open}
setOpen={setOpen}
className="max-w-lg bg-paper p-6"
>
<Stack className="w-full gap-4! items-stretch">
<Stack className="w-full gap-1! items-stretch">
<H2 className="text-lg! leading-6! tracking-normal! font-bold text-ink">Add a tool</H2>
<Span className="text-[13px] leading-[18px] text-ink-secondary">
{`${bot_name} can use it everywhere it works, for everyone it works for.`}
</Span>
</Stack>
<ExtensionAddSelect
id="composer-add-extension"
addable={addable}
loading={loading}
onAdd={async (picked) => {
if (await onAdd(picked)) setOpen(false);
}}
/>
</Stack>
</Modal>
);
}