ai-plugin: Add ability to approve a tool request

Signed-off-by: Ashu Ghildiyal <aghildiyal@microsoft.com>

Author: ashu8912

ai-assistant/src/components/common/ToolApprovalDialog.tsx

@@ -0,0 +1,307 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+  Box,
+  Chip,
+  Alert,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  List,
+  ListItem,
+  ListItemText,
+  IconButton,
+  Tooltip,
+  FormGroup,
+  FormControlLabel,
+  Checkbox,
+} from '@mui/material';
+import { Icon } from '@iconify/react';
+
+interface ToolCall {
+  id: string;
+  name: string;
+  description?: string;
+  arguments: Record<string, any>;
+  type: 'mcp' | 'regular';
+}
+
+interface ToolApprovalDialogProps {
+  open: boolean;
+  toolCalls: ToolCall[];
+  onApprove: (approvedToolIds: string[]) => void;
+  onDeny: () => void;
+  onClose: () => void;
+  loading?: boolean;
+}
+
+const ToolApprovalDialog: React.FC<ToolApprovalDialogProps> = ({
+  open,
+  toolCalls,
+  onApprove,
+  onDeny,
+  onClose,
+  loading = false,
+}) => {
+  const [selectedToolIds, setSelectedToolIds] = useState<string[]>(
+    toolCalls.map(tool => tool.id)
+  );
+  const [rememberChoice, setRememberChoice] = useState(false);
+
+  // Reset selection when toolCalls change
+  React.useEffect(() => {
+    if (open) {
+      setSelectedToolIds(toolCalls.map(tool => tool.id));
+      setRememberChoice(false);
+    }
+  }, [toolCalls, open]);
+
+  const handleSelectAll = () => {
+    setSelectedToolIds(toolCalls.map(tool => tool.id));
+  };
+
+  const handleDeselectAll = () => {
+    setSelectedToolIds([]);
+  };
+
+  const handleToolToggle = (toolId: string) => {
+    setSelectedToolIds(prev => 
+      prev.includes(toolId) 
+        ? prev.filter(id => id !== toolId)
+        : [...prev, toolId]
+    );
+  };
+
+  const handleApprove = () => {
+    onApprove(selectedToolIds);
+  };
+
+  const mcpTools = toolCalls.filter(tool => tool.type === 'mcp');
+  const regularTools = toolCalls.filter(tool => tool.type === 'regular');
+
+  const getToolIcon = (toolName: string, toolType: 'mcp' | 'regular') => {
+    if (toolType === 'mcp') {
+      return 'mdi:docker'; // Inspektor Gadget runs in Docker
+    }
+    
+    // Regular Kubernetes tools
+    if (toolName.includes('kubernetes') || toolName.includes('k8s')) {
+      return 'mdi:kubernetes';
+    }
+    return 'mdi:tool';
+  };
+
+  const formatArguments = (args: Record<string, any>) => {
+    return Object.entries(args)
+      .filter(([_, value]) => value !== undefined && value !== null && value !== '')
+      .map(([key, value]) => (
+        <ListItem key={key} dense>
+          <ListItemText 
+            primary={key} 
+            secondary={
+              typeof value === 'object' 
+                ? JSON.stringify(value, null, 2)
+                : String(value)
+            }
+          />
+        </ListItem>
+      ));
+  };
+
+  const renderToolSection = (tools: ToolCall[], title: string, color: 'primary' | 'secondary') => {
+    if (tools.length === 0) return null;
+
+    return (
+      <Box sx={{ mb: 2 }}>
+        <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center' }}>
+          {title}
+          <Chip 
+            label={tools.length} 
+            size="small" 
+            color={color}
+            sx={{ ml: 1 }}
+          />
+        </Typography>
+        {tools.map(tool => (
+          <Accordion key={tool.id} sx={{ mb: 1 }}>
+            <AccordionSummary
+              expandIcon={<Icon icon="mdi:chevron-down" />}
+              sx={{ 
+                '& .MuiAccordionSummary-content': {
+                  alignItems: 'center'
+                }
+              }}
+            >
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={selectedToolIds.includes(tool.id)}
+                    onChange={() => handleToolToggle(tool.id)}
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                }
+                label=""
+                sx={{ mr: 1 }}
+                onClick={(e) => e.stopPropagation()}
+              />
+              <Icon 
+                icon={getToolIcon(tool.name, tool.type)} 
+                style={{ marginRight: 8 }}
+              />
+              <Box>
+                <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>
+                  {tool.name}
+                </Typography>
+                {tool.description && (
+                  <Typography variant="caption" color="text.secondary">
+                    {tool.description}
+                  </Typography>
+                )}
+              </Box>
+              {tool.type === 'mcp' && (
+                <Chip 
+                  label="MCP Tool" 
+                  size="small" 
+                  color="info" 
+                  variant="outlined"
+                  sx={{ ml: 'auto', mr: 1 }}
+                />
+              )}
+            </AccordionSummary>
+            <AccordionDetails>
+              <Typography variant="body2" gutterBottom color="text.secondary">
+                Arguments to be passed:
+              </Typography>
+              <List dense>
+                {formatArguments(tool.arguments)}
+              </List>
+            </AccordionDetails>
+          </Accordion>
+        ))}
+      </Box>
+    );
+  };
+
+  return (
+    <Dialog 
+      open={open} 
+      onClose={loading ? undefined : onClose}
+      maxWidth="md"
+      fullWidth
+      PaperProps={{
+        sx: { minHeight: '50vh' }
+      }}
+    >
+      <DialogTitle sx={{ 
+        display: 'flex', 
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      }}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Icon icon="mdi:security" style={{ marginRight: 8 }} />
+          Tool Execution Approval Required
+        </Box>
+        {!loading && (
+          <IconButton onClick={onClose} size="small">
+            <Icon icon="mdi:close" />
+          </IconButton>
+        )}
+      </DialogTitle>
+
+      <DialogContent>
+        <Alert severity="info" sx={{ mb: 3 }}>
+          The AI Assistant wants to execute {toolCalls.length} tool{toolCalls.length > 1 ? 's' : ''} 
+          to complete your request. Please review and approve the tools you want to allow.
+        </Alert>
+
+        {mcpTools.length > 0 && (
+          <Alert severity="warning" sx={{ mb: 3 }}>
+            <Typography variant="subtitle2" gutterBottom>
+              MCP Tools (Inspektor Gadget)
+            </Typography>
+            <Typography variant="body2">
+              These tools will execute debugging commands in your Kubernetes clusters through 
+              Inspektor Gadget containers. They provide deep system-level insights but require 
+              elevated permissions.
+            </Typography>
+          </Alert>
+        )}
+
+        <Box sx={{ mb: 3, display: 'flex', gap: 1 }}>
+          <Button
+            variant="outlined"
+            size="small"
+            onClick={handleSelectAll}
+            startIcon={<Icon icon="mdi:check-all" />}
+          >
+            Select All
+          </Button>
+          <Button
+            variant="outlined"
+            size="small"
+            onClick={handleDeselectAll}
+            startIcon={<Icon icon="mdi:close-box-multiple" />}
+          >
+            Deselect All
+          </Button>
+        </Box>
+
+        {renderToolSection(regularTools, 'Kubernetes Tools', 'primary')}
+        {renderToolSection(mcpTools, 'MCP Tools (Inspektor Gadget)', 'secondary')}
+
+        <FormGroup sx={{ mt: 2 }}>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={rememberChoice}
+                onChange={(e) => setRememberChoice(e.target.checked)}
+              />
+            }
+            label={
+              <Typography variant="body2">
+                Remember my choice for this session (auto-approve similar tools)
+              </Typography>
+            }
+          />
+        </FormGroup>
+      </DialogContent>
+
+      <DialogActions sx={{ px: 3, pb: 2 }}>
+        <Box sx={{ 
+          display: 'flex', 
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          width: '100%' 
+        }}>
+          <Typography variant="body2" color="text.secondary">
+            {selectedToolIds.length} of {toolCalls.length} tools selected
+          </Typography>
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            <Button 
+              onClick={onDeny} 
+              disabled={loading}
+              color="error"
+            >
+              Deny All
+            </Button>
+            <Button 
+              onClick={handleApprove} 
+              variant="contained"
+              disabled={loading || selectedToolIds.length === 0}
+              startIcon={loading ? <Icon icon="mdi:loading" className="animate-spin" /> : <Icon icon="mdi:check" />}
+            >
+              {loading ? 'Executing...' : `Approve ${selectedToolIds.length > 0 ? `(${selectedToolIds.length})` : ''}`}
+            </Button>
+          </Box>
+        </Box>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ToolApprovalDialog;

ai-assistant/src/components/common/index.ts

@@ -1,4 +1,5 @@
 export { default as ApiConfirmationDialog } from './ApiConfirmationDialog';
 export { default as LogsButton } from './LogsButton';
 export { default as LogsDialog } from './LogsDialog';
+export { default as ToolApprovalDialog } from './ToolApprovalDialog';
 export { default as YamlDisplay } from './YamlDisplay';

ai-assistant/src/hooks/useToolApproval.ts

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useState } from 'react';
+import { toolApprovalManager, ToolApprovalRequest } from '../utils/ToolApprovalManager';
+
+export interface UseToolApprovalResult {
+  showApprovalDialog: boolean;
+  pendingRequest: ToolApprovalRequest | null;
+  handleApprove: (approvedToolIds: string[], rememberChoice?: boolean) => void;
+  handleDeny: () => void;
+  handleClose: () => void;
+  isProcessing: boolean;
+}
+
+export const useToolApproval = (): UseToolApprovalResult => {
+  const [showApprovalDialog, setShowApprovalDialog] = useState(false);
+  const [pendingRequest, setPendingRequest] = useState<ToolApprovalRequest | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  // Listen for approval requests from the manager
+  useEffect(() => {
+    const handleApprovalRequest = (request: ToolApprovalRequest) => {
+      setPendingRequest(request);
+      setShowApprovalDialog(true);
+      setIsProcessing(false);
+    };
+
+    toolApprovalManager.on('approval-requested', handleApprovalRequest);
+
+    return () => {
+      toolApprovalManager.off('approval-requested', handleApprovalRequest);
+    };
+  }, []);
+
+  const handleApprove = useCallback((approvedToolIds: string[], rememberChoice = false) => {
+    if (!pendingRequest) return;
+
+    setIsProcessing(true);
+    toolApprovalManager.approveTools(pendingRequest.requestId, approvedToolIds, rememberChoice);
+    
+    // Close dialog after a brief delay to show processing state
+    setTimeout(() => {
+      setShowApprovalDialog(false);
+      setPendingRequest(null);
+      setIsProcessing(false);
+    }, 500);
+  }, [pendingRequest]);
+
+  const handleDeny = useCallback(() => {
+    if (!pendingRequest) return;
+
+    toolApprovalManager.denyTools(pendingRequest.requestId);
+    setShowApprovalDialog(false);
+    setPendingRequest(null);
+    setIsProcessing(false);
+  }, [pendingRequest]);
+
+  const handleClose = useCallback(() => {
+    // Close is essentially a denial - user dismissed the dialog
+    handleDeny();
+  }, [handleDeny]);
+
+  return {
+    showApprovalDialog,
+    pendingRequest,
+    handleApprove,
+    handleDeny,
+    handleClose,
+    isProcessing,
+  };
+};