'use client'; import type { openai } from '@ai-sdk/openai'; import type { UIToolInvocation } from 'ai'; import { parseDiffForVisualization } from '@/lib/apply-diff'; export default function OpenAIApplyPatchView({ invocation, }: { invocation: UIToolInvocation>; }) { switch (invocation.state) { case 'input-streaming': case 'input-available': { if (!invocation.input) { return; } const input = invocation.input as { callId: string; operation: { type: 'create_file' | 'update_file' | 'delete_file'; path: string; diff: string; }; }; const operationType = input.operation.type; const operationLabel = operationType === 'create_file' ? invocation.state === 'input-available' ? 'CREATE FILE' : 'CREATING FILE' : operationType === 'update_file' ? invocation.state === 'input-available' ? 'UPDATE FILE' : 'UPDATING FILE' : invocation.state === 'input-available' ? 'DELETE FILE' : 'DELETING FILE'; const bgColor = operationType === 'create_file' ? 'bg-green-50 border-green-400' : operationType === 'update_file' ? 'bg-blue-50 border-blue-400' : 'bg-red-50 border-red-400'; const textColor = operationType === 'create_file' ? 'text-green-700' : operationType === 'update_file' ? 'text-blue-700' : 'text-red-700'; const badgeColor = operationType === 'create_file' ? 'bg-green-200 text-green-900' : operationType === 'update_file' ? 'bg-blue-200 text-blue-900' : 'bg-red-200 text-red-900'; // Parse diff for visualization const { lines, addedLines, removedLines, contextLines } = parseDiffForVisualization(input.operation.diff || ''); return (

{operationLabel} {operationType === 'create_file' ? 'Creating file' : operationType === 'update_file' ? 'Updating file' : 'Deleting file'}

File name:{' '} {input.operation.path}

{operationType !== 'delete_file' && input.operation.diff && (

{lines.length > 0 ? (

{lines.map((lineItem, idx) => { if (lineItem.type === 'removed') { return (

- {lineItem.line || ' '}

); } else if (lineItem.type === 'added') { return (

+ {lineItem.line || ' '}

); } else { return (

{' '} {lineItem.line || ' '}

); } })}

) : (

No diff content to display

)}

); } case 'output-available': { const input = invocation.input as { callId: string; operation: { type: 'create_file' | 'update_file' | 'delete_file'; path: string; diff: string; }; }; const output = invocation.output as { status: 'completed' | 'failed'; output?: string; }; const operationType = input.operation.type; const operationLabel = operationType === 'create_file' ? 'CREATE FILE' : operationType === 'update_file' ? 'UPDATE FILE' : 'DELETE FILE'; const isSuccess = output.status === 'completed'; const bgColor = isSuccess ? operationType === 'create_file' ? 'bg-green-50 border-green-500' : operationType === 'update_file' ? 'bg-blue-50 border-blue-500' : 'bg-red-50 border-red-500' : 'bg-red-50 border-red-500'; const textColor = isSuccess ? operationType === 'create_file' ? 'text-green-800' : operationType === 'update_file' ? 'text-blue-800' : 'text-red-800' : 'text-red-800'; const badgeColor = isSuccess ? operationType === 'create_file' ? 'bg-green-200 text-green-900' : operationType === 'update_file' ? 'bg-blue-200 text-blue-900' : 'bg-red-200 text-red-900' : 'bg-red-200 text-red-900'; // Parse diff for visualization const { lines, addedLines, removedLines, contextLines } = parseDiffForVisualization(input.operation.diff || ''); return (

{operationLabel} {isSuccess ? operationType === 'create_file' ? 'File created' : operationType === 'update_file' ? 'File updated' : 'File deleted' : 'Operation failed'}