import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// A react component for displaying system tools.
// system tools are locally running function tools defined by the user via props.
// Allows viewing and managing the permissions of these tools.
import React from 'react';
import { useTheme } from '../theme';
import { useAdditionalTools } from '../contexts/AdditionalToolsContext';
import { Accordion } from './core/Accordion';
export const SystemToolList = () => {
    const theme = useTheme();
    const { tools, setToolPermission } = useAdditionalTools();
    const handlePermissionChange = React.useCallback((toolName, permission) => {
        setToolPermission(toolName, permission);
    }, [setToolPermission]);
    if (tools.length === 0) {
        return (_jsxs("div", { className: theme.systemSettings.infoMessage, children: ["No additional tools are currently configured. Provide tool definitions to the ", _jsx("code", { children: "AdditionalToolsProvider" }), " to enable management here."] }));
    }
    const permissionStyles = {
        enabled: 'bg-green-100 text-green-800',
        ask_first: 'bg-yellow-100 text-yellow-800',
        disabled: 'bg-red-100 text-red-800'
    };
    const permissionLabels = {
        enabled: 'Enabled',
        ask_first: 'Ask First',
        disabled: 'Disabled'
    };
    return (_jsx(Accordion, { defaultOpen: false, header: (_jsx("div", { className: "flex w-full items-center justify-between gap-3", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: theme.systemSettings.cardHeading, children: "Configured tools" }), _jsxs("span", { className: theme.systemSettings.helperText, children: [tools.length, " ", tools.length === 1 ? 'tool available' : 'tools available'] })] }) })), children: _jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: theme.systemSettings.helperText, children: "Additional tools provided to chat sessions. Developer-configured approval requirements cannot be changed." }), tools.map((tool) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [_jsx("h4", { className: theme.systemSettings.cardHeading, children: tool.name }), _jsx("p", { className: theme.systemSettings.cardSubheading, children: tool.description })] }), _jsx("span", { className: `inline-flex flex-shrink-0 items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${permissionStyles[tool.effectivePermission]}`, children: permissionLabels[tool.effectivePermission] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("select", { "aria-label": `${tool.name} permission`, value: tool.isPermissionConfigurable ? (tool.runtimePermission ?? tool.effectivePermission) : tool.effectivePermission, onChange: (event) => handlePermissionChange(tool.name, event.target.value), disabled: !tool.isPermissionConfigurable, className: "rounded-md border border-gray-300 bg-white px-2 py-1 text-sm font-medium text-gray-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500", children: [_jsx("option", { value: "enabled", children: "Enabled" }), _jsx("option", { value: "ask_first", children: "Ask First" }), _jsx("option", { value: "disabled", children: "Disabled" })] }), !tool.isPermissionConfigurable && (_jsx("span", { className: theme.systemSettings.helperText, children: "Configured by developer" }))] }), _jsx("p", { className: theme.systemSettings.helperText, children: tool.permissionReason })] }, tool.name)))] }) }));
};
