feat: approval tool

Author: rob-at-cortex

src/components/Chat/ChatInterface.stories.tsx

@@ -38,7 +38,7 @@ import {
   getDataPart,
 } from './types'
 
-import { PartAuthenticateTool, PartText } from './PartTypes'
+import { PartAuthenticateTool, PartText, PartApprovalTool } from './PartTypes'
 
 interface ChatInterfaceProps {
   messages: UIMessage[]
@@ -204,7 +204,7 @@ export function ChatInterface({
     // const textContent = getTextContent(message)
 
     return (
-      <div className={cn('flex items-start gap-3', isUser ? 'flex-row-reverse' : '')}>
+      <div className={cn('flex my-2 items-start gap-3', isUser ? 'flex-row-reverse' : '')}>
         <Avatar className="h-8 w-8 shrink-0">
           <AvatarFallback
             className={cn(
@@ -321,6 +321,28 @@ export function ChatInterface({
                   </div>
                 )
               }
+              if (part.type === 'tool-authenticate') {
+                return (
+                  <div key={index} className="mb-2">
+                    <PartAuthenticateTool
+                      toolPart={toolPart}
+                      index={index}
+                      addToolResult={addToolResult ?? (() => {})}
+                    />
+                  </div>
+                )
+              }
+              if (part.type === 'tool-requestApproval') {
+                return (
+                  <div key={index} className="mb-2">
+                    <PartApprovalTool
+                      toolPart={toolPart}
+                      index={index}
+                      addToolResult={addToolResult ?? (() => {})}
+                    />
+                  </div>
+                )
+              }
 
               // Handle artefact tool
               if (toolName === 'artefact') {

src/components/Chat/ChatInterface.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { ApprovalRequestModal } from './ApprovalRequest'
+
+const meta: Meta<typeof ApprovalRequestModal> = {
+  title: 'Chat/Components/ApprovalRequestModal',
+  component: ApprovalRequestModal,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A modal component for requesting user approval with a reason. Used when explicit confirmation is needed before proceeding with an action.'
+      }
+    }
+  },
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Controls whether the modal is visible'
+    },
+    reason: {
+      control: 'text',
+      description: 'The reason why approval is required (shown to the user)'
+    },
+    title: {
+      control: 'text',
+      description: 'The title of the modal'
+    },
+    onClose: {
+      action: 'closed',
+      description: 'Callback fired when the modal is closed'
+    },
+    onApprove: {
+      action: 'approved',
+      description: 'Callback fired when the user approves the action'
+    },
+    onDeny: {
+      action: 'denied',
+      description: 'Callback fired when the user denies the action'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof ApprovalRequestModal>
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    reason: 'This action will permanently delete all user data. Do you want to proceed?',
+    onClose: action('onClose'),
+    onApprove: action('onApprove'),
+    onDeny: action('onDeny')
+  }
+}
+
+export const FileOperation: Story = {
+  args: {
+    isOpen: true,
+    reason: 'This will overwrite the existing file "document.pdf". This action cannot be undone.',
+    title: 'File Overwrite Confirmation',
+    onClose: action('onClose'),
+    onApprove: action('onApprove'),
+    onDeny: action('onDeny')
+  }
+}
+
+export const DatabaseOperation: Story = {
+  args: {
+    isOpen: true,
+    reason: 'You are about to execute a database migration that will affect 10,000+ records. This operation may take several minutes to complete.',
+    title: 'Database Migration Approval',
+    onClose: action('onClose'),
+    onApprove: action('onApprove'),
+    onDeny: action('onDeny')
+  }
+}
+
+export const PaymentOperation: Story = {
+  args: {
+    isOpen: true,
+    reason: 'You are about to process a payment of $1,250.00 to vendor "Acme Corp". Please confirm this transaction.',
+    title: 'Payment Authorization',
+    onClose: action('onClose'),
+    onApprove: action('onApprove'),
+    onDeny: action('onDeny')
+  }
+}
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+    reason: 'This modal is closed and should not be visible',
+    onClose: action('onClose'),
+    onApprove: action('onApprove'),
+    onDeny: action('onDeny')
+  }
+}

src/components/Chat/Components/ApprovalRequest.stories.tsx

@@ -0,0 +1,83 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ApprovalRequestModal } from './ApprovalRequest'
+
+describe('ApprovalRequestModal', () => {
+  const mockProps = {
+    reason: 'Test approval reason',
+    onClose: vi.fn(),
+    onApprove: vi.fn(),
+    onDeny: vi.fn()
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders when isOpen is true', () => {
+    render(<ApprovalRequestModal {...mockProps} isOpen={true} />)
+    
+    expect(screen.getByText('Approval Required')).toBeTruthy()
+    expect(screen.getByText('Test approval reason')).toBeTruthy()
+  })
+
+  it('does not render when isOpen is false', () => {
+    render(<ApprovalRequestModal {...mockProps} isOpen={false} />)
+    
+    expect(screen.queryByText('Approval Required')).toBeNull()
+  })
+
+  it('displays custom title when provided', () => {
+    render(<ApprovalRequestModal {...mockProps} title="Custom Title" isOpen={true} />)
+    
+    expect(screen.getByText('Custom Title')).toBeTruthy()
+  })
+
+  it('calls onApprove and onClose when Approve button is clicked', () => {
+    render(<ApprovalRequestModal {...mockProps} isOpen={true} />)
+    
+    const approveButton = screen.getByText('Approve')
+    fireEvent.click(approveButton)
+    
+    expect(mockProps.onApprove).toHaveBeenCalledTimes(1)
+    expect(mockProps.onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onDeny and onClose when Deny button is clicked', () => {
+    render(<ApprovalRequestModal {...mockProps} isOpen={true} />)
+    
+    const denyButton = screen.getByText('Deny')
+    fireEvent.click(denyButton)
+    
+    expect(mockProps.onDeny).toHaveBeenCalledTimes(1)
+    expect(mockProps.onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClose when Cancel button is clicked', () => {
+    render(<ApprovalRequestModal {...mockProps} isOpen={true} />)
+    
+    const cancelButton = screen.getByText('Cancel')
+    fireEvent.click(cancelButton)
+    
+    expect(mockProps.onClose).toHaveBeenCalledTimes(1)
+    expect(mockProps.onApprove).not.toHaveBeenCalled()
+    expect(mockProps.onDeny).not.toHaveBeenCalled()
+  })
+
+  it('disables buttons when processing', () => {
+    render(<ApprovalRequestModal {...mockProps} isOpen={true} />)
+    
+    const approveButton = screen.getByText('Approve')
+    fireEvent.click(approveButton)
+    
+    // After clicking, buttons should be disabled
+    expect(screen.getByText('Processing...')).toBeTruthy()
+  })
+
+  it('displays the reason text correctly', () => {
+    const longReason = 'This is a very long reason that explains why approval is needed for this specific action that the user is about to perform.'
+    render(<ApprovalRequestModal {...mockProps} reason={longReason} isOpen={true} />)
+    
+    expect(screen.getByText(longReason)).toBeTruthy()
+  })
+})

src/components/Chat/Components/ApprovalRequest.test.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface ApprovalRequestModalProps {
+  isOpen?: boolean
+  reason: string
+  onClose: () => void
+  onApprove: () => void
+  onDeny: () => void
+  title?: string
+}
+
+const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
+  isOpen = true,
+  reason,
+  onClose,
+  onApprove,
+  onDeny,
+  title = 'Approval Required'
+}) => {
+  const [isProcessing, setIsProcessing] = useState(false)
+
+  const handleApprove = () => {
+    setIsProcessing(true)
+    onApprove()
+    onClose()
+  }
+
+  const handleDeny = () => {
+    setIsProcessing(true)
+    onDeny()
+    onClose()
+  }
+
+  const handleCancel = () => {
+    setIsProcessing(true)
+    onDeny()
+    onClose()
+  }
+
+  if (!isOpen) return null
+
+  return (
+    // <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[1000]">
+      <div className="bg-white rounded-lg p-6 max-w-md w-full shadow-lg">
+        <h3 className="text-lg font-bold mb-3 text-primary">
+          {title}
+        </h3>
+        
+        <p className="text-sm text-gray-600 mb-6">
+          {reason}
+        </p>
+
+        <div className="flex gap-2">
+          <button
+            onClick={handleApprove}
+            disabled={isProcessing}
+            className={`
+              px-4 py-2 text-white border-none rounded text-sm font-bold flex-1
+              ${isProcessing 
+                ? 'bg-gray-400 cursor-not-allowed' 
+                : 'bg-green-600 hover:bg-green-700 cursor-pointer'
+              }
+            `}
+          >
+            {isProcessing ? 'Processing...' : 'Approve'}
+          </button>
+
+          <button
+            onClick={handleDeny}
+            disabled={isProcessing}
+            className={`
+              px-4 py-2 text-white border-none rounded text-sm font-bold flex-1
+              ${isProcessing 
+                ? 'bg-gray-400 cursor-not-allowed' 
+                : 'bg-red-600 hover:bg-red-700 cursor-pointer'
+              }
+            `}
+          >
+            {isProcessing ? 'Processing...' : 'Deny'}
+          </button>
+
+          <button
+            onClick={handleCancel}
+            disabled={isProcessing}
+            className={`
+              px-4 py-2 text-white border-none rounded text-sm
+              ${isProcessing 
+                ? 'bg-gray-400 cursor-not-allowed' 
+                : 'bg-gray-500 hover:bg-gray-600 cursor-pointer'
+              }
+            `}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    // </div>
+  )
+}
+
+export type { ApprovalRequestModalProps }
+export { ApprovalRequestModal }