'use client'; import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { X, AlertCircle } from 'lucide-react'; import dynamic from 'next/dynamic'; import LoadingDots from '@/components/ui/animations/LoadingDots'; interface SlidingModalProps { isOpen: boolean; onClose: () => void; pythonCode?: string; output?: string; isExecuting: boolean; } // Type for managing output state type OutputState = { isLoading: boolean; content: string; }; const ClientOnlyModal = dynamic(() => Promise.resolve(({ children }: { children: React.ReactNode }) => <>{children}), { ssr: false }); const SlidingModal: React.FC = ({ isOpen, onClose, pythonCode = '', output = '', isExecuting }) => { const [mounted, setMounted] = useState(false); const [outputState, setOutputState] = useState({ isLoading: isExecuting, content: output }); // Effect for handling mounting useEffect(() => { setMounted(true); }, []); // Effect for handling output changes useEffect(() => { setOutputState({ isLoading: isExecuting, content: output }); }, [output, isExecuting]); // Function to mask sensitive information const maskSensitiveInfo = (code: string): string => { return code .replace(/sk-proj-[a-zA-Z0-9-]+/g, 'YOUR_OPENAI_API_KEY') .replace(/asst_[a-zA-Z0-9]+/g, 'YOUR_ASSISTANT_ID'); }; // Function to determine output message const getOutputMessage = (): JSX.Element | string => { if (!outputState.content && !outputState.isLoading) { return '> No output available'; } if (outputState.isLoading) { return ( {'> Executing'} ); } return outputState.content; }; // Don't render anything if not mounted if (!mounted) { return null; } return ( {isOpen && ( <>

Code Output

Generated Python Code:

script.py
                          {maskSensitiveInfo(pythonCode).split('\n').map((line, i) => (
                            
{i + 1} {line || ' '}
))}

Output:

Terminal
                          {getOutputMessage()}
                        

Continue your chat locally

To continue interacting with the AI assistant, please run this code in your local Python IDE where you can provide real-time responses and engage in a full conversation.

)}
); }; export default SlidingModal;