import React, { useState } from 'react'; import { Button } from '../../ui/button'; import { useEscapeKey } from '../../../hooks/useEscapeKey'; import { defineMessages, useIntl } from '../../../i18n'; const i18n = defineMessages({ title: { id: 'instructionsEditor.title', defaultMessage: 'Instructions Editor', }, label: { id: 'instructionsEditor.label', defaultMessage: 'Instructions', }, insertExample: { id: 'instructionsEditor.insertExample', defaultMessage: 'Insert Example', }, syntaxHelp: { id: 'instructionsEditor.syntaxHelp', defaultMessage: 'Use {code} syntax to define parameters that users can fill in', }, placeholder: { id: 'instructionsEditor.placeholder', defaultMessage: 'Detailed instructions for the AI, hidden from the user', }, cancel: { id: 'instructionsEditor.cancel', defaultMessage: 'Cancel', }, save: { id: 'instructionsEditor.save', defaultMessage: 'Save Instructions', }, }); interface InstructionsEditorProps { isOpen: boolean; onClose: () => void; value: string; onChange: (value: string) => void; error?: string; } export default function InstructionsEditor({ isOpen, onClose, value, onChange, error, }: InstructionsEditorProps) { const intl = useIntl(); const [localValue, setLocalValue] = useState(value); useEscapeKey(isOpen, onClose); React.useEffect(() => { if (isOpen) { setLocalValue(value); } }, [isOpen, value]); const handleSave = () => { onChange(localValue); onClose(); }; const handleCancel = () => { setLocalValue(value); // Reset to original value onClose(); }; const insertExample = () => { const example = `You are an AI assistant helping with {{task_type}}. Please follow these steps: 1. Analyze the provided {{input_data}} 2. Apply the specified {{methodology}} 3. Generate a comprehensive report Requirements: - Be thorough and accurate - Use clear, professional language - Include specific examples where relevant - Provide actionable recommendations Format your response with: - Executive summary - Detailed analysis - Key findings - Next steps Use {{parameter_name}} syntax for any user-provided values.`; setLocalValue(example); }; if (!isOpen) return null; return (

{ // Close modal when clicking backdrop if (e.target === e.currentTarget) { handleCancel(); } }} >

{intl.formatMessage(i18n.title)}

{intl.formatMessage(i18n.label)}

{intl.formatMessage(i18n.syntaxHelp, { code: '{{parameter_name}}' })}