73 lines
2.4 KiB
TypeScript
73 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>
|
|
);
|
|
}
|