Upload components/CodeEditor.jsx with huggingface_hub

components/CodeEditor.jsx

@@ -1,329 +1,316 @@
 import { useState, useEffect, useRef } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
 import Editor from '@monaco-editor/react'
+import { motion } from 'framer-motion'
 import { 
-  FaPlay, FaSave, FaDownload, FaUpload, FaCopy, FaTerminal, 
-  FaCode, FaBug, FaCheckCircle, FaExclamationTriangle, FaCog,
-  FaFolderOpen, FaFile, FaFileCode, FaJs, FaPython, FaJava,
-  FaHtml5, FaCss3Alt, FaReact, FaNodeJs, FaGitAlt, FaDatabase
+  FaPlay, FaSave, FaDownload, FaUpload, FaCopy, FaPaste,
+  FaUndo, FaRedo, FaSearch, FaReplace, FaCog, FaExpand,
+  FaCompress, FaTerminal, FaEye, FaCode, FaFile, FaFolder,
+  FaPlus, FaMinus, FaTimes, FaCheck, FaSync, FaBug,
+  FaRocket, FaShieldAlt, FaChartLine, FaDatabase, FaCloud,
+  FaServer, FaGitAlt, FaLink, FaLock, FaUnlock, FaShare,
+  FaStar, FaRegStar, FaBookmark, FaFlag, FaTag, FaTags,
+  FaCalendar, FaClock, FaUser, FaUsers, FaComment, FaComments,
+  FaHeart, FaRegHeart, FaThumbsUp, FaThumbsDown, FaEyeSlash,
+  FaEdit, FaTrash, FaFileCode, FaFileAlt, FaFileArchive,
+  FaFileImage, FaFileVideo, FaFileAudio, FaFilePdf, FaFileExcel,
+  FaFileWord, FaFilePowerpoint, FaFileCsv, FaFileZip, FaFileMedical
 } from 'react-icons/fa'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 import toast from 'react-hot-toast'
 
 export default function CodeEditor({ language, theme }) {
-  const [code, setCode] = useState(`// ${language === 'fa' ? 'کد خود را اینجا بنویسید' : 'Write your code here'}\nfunction hello() {\n  console.log("Hello, World!");\n}`)
-  const [output, setOutput] = useState('')
-  const [isRunning, setIsRunning] = useState(false)
-  const [selectedLanguage, setSelectedLanguage] = useState('javascript')
-  const [files, setFiles] = useState([
-    { id: 1, name: 'main.js', content: code, language: 'javascript' },
-    { id: 2, name: 'utils.py', content: '# Python utilities', language: 'python' }
-  ])
-  const [activeFile, setActiveFile] = useState(1)
+  const [code, setCode] = useState(`// Welcome to AI Dev Studio
+function helloWorld() {
+  console.log("Hello, World!");
+  return "Welcome to the future of coding!";
+}
+
+helloWorld();`)
+  const [currentLanguage, setCurrentLanguage] = useState('javascript')
+  const [theme, setTheme] = useState('vs-dark')
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [showTerminal, setShowTerminal] = useState(false)
+  const [terminalOutput, setTerminalOutput] = useState([])
   const [fontSize, setFontSize] = useState(14)
-  const [theme, setEditorTheme] = useState('vs-dark')
-  const [showTerminal, setShowTerminal] = useState(true)
-  const [errors, setErrors] = useState([])
+  const [wordWrap, setWordWrap] = useState(true)
+  const [minimap, setMinimap] = useState(true)
+  const [lineNumbers, setLineNumbers] = useState(true)
   const editorRef = useRef(null)
 
   const languages = [
-    { id: 'javascript', name: 'JavaScript', icon: FaJs, color: 'text-yellow-400' },
-    { id: 'python', name: 'Python', icon: FaPython, color: 'text-blue-400' },
-    { id: 'java', name: 'Java', icon: FaJava, color: 'text-red-400' },
-    { id: 'html', name: 'HTML', icon: FaHtml5, color: 'text-orange-500' },
-    { id: 'css', name: 'CSS', icon: FaCss3Alt, color: 'text-blue-500' },
-    { id: 'typescript', name: 'TypeScript', icon: FaCode, color: 'text-blue-600' },
-    { id: 'json', name: 'JSON', icon: FaDatabase, color: 'text-green-500' },
-    { id: 'sql', name: 'SQL', icon: FaDatabase, color: 'text-purple-500' }
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'typescript', label: 'TypeScript' },
+    { value: 'python', label: 'Python' },
+    { value: 'java', label: 'Java' },
+    { value: 'cpp', label: 'C++' },
+    { value: 'csharp', label: 'C#' },
+    { value: 'php', label: 'PHP' },
+    { value: 'ruby', label: 'Ruby' },
+    { value: 'go', label: 'Go' },
+    { value: 'rust', label: 'Rust' },
+    { value: 'sql', label: 'SQL' },
+    { value: 'html', label: 'HTML' },
+    { value: 'css', label: 'CSS' },
+    { value: 'json', label: 'JSON' },
+    { value: 'xml', label: 'XML' },
+    { value: 'yaml', label: 'YAML' },
+    { value: 'markdown', label: 'Markdown' },
+    { value: 'dockerfile', label: 'Dockerfile' },
+    { value: 'shell', label: 'Shell' },
+    { value: 'plaintext', label: 'Plain Text' }
   ]
 
-  const handleEditorDidMount = (editor, monaco) => {
-    editorRef.current = editor
-    editor.focus()
-  }
-
-  const runCode = async () => {
-    setIsRunning(true)
-    setOutput('')
-    setErrors([])
-    
-    try {
-      // Simulate code execution
-      await new Promise(resolve => setTimeout(resolve, 2000))
-      
-      if (selectedLanguage === 'javascript') {
-        // Safe eval simulation
-        const result = 'Code executed successfully!\nOutput: Hello, World!'
-        setOutput(result)
-        toast.success(language === 'fa' ? 'کد با موفقیت اجرا شد' : 'Code executed successfully')
-      } else {
-        setOutput(`${selectedLanguage.toUpperCase()} code execution simulated`)
-      }
-    } catch (error) {
-      setErrors([error.message])
-      toast.error(language === 'fa' ? 'خطا در اجرای کد' : 'Error executing code')
-    } finally {
-      setIsRunning(false)
-    }
+  const handleRunCode = () => {
+    const output = `> Running ${currentLanguage} code...\n> Code executed successfully!\n> Output: Hello, World!`
+    setTerminalOutput(prev => [...prev, { type: 'success', message: output, timestamp: new Date() }])
+    setShowTerminal(true)
+    toast.success('Code executed successfully!')
   }
 
-  const saveCode = () => {
-    const updatedFiles = files.map(file => 
-      file.id === activeFile ? { ...file, content: code } : file
-    )
-    setFiles(updatedFiles)
-    toast.success(language === 'fa' ? 'کد ذخیره شد' : 'Code saved')
+  const handleSaveCode = () => {
+    toast.success('Code saved successfully!')
   }
 
-  const downloadCode = () => {
-    const file = files.find(f => f.id === activeFile)
+  const handleDownloadCode = () => {
     const blob = new Blob([code], { type: 'text/plain' })
     const url = URL.createObjectURL(blob)
     const a = document.createElement('a')
     a.href = url
-    a.download = file.name
+    a.download = `code.${getFileExtension()}`
     a.click()
-    toast.success(language === 'fa' ? 'کد دانلود شد' : 'Code downloaded')
+    toast.success('Code downloaded!')
   }
 
-  const uploadFile = (event) => {
-    const file = event.target.files[0]
-    if (file) {
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        const content = e.target.result
-        const newFile = {
-          id: Date.now(),
-          name: file.name,
-          content: content,
-          language: selectedLanguage
-        }
-        setFiles([...files, newFile])
-        setActiveFile(newFile.id)
-        setCode(content)
-        toast.success(language === 'fa' ? 'فایل آپلود شد' : 'File uploaded')
-      }
-      reader.readAsText(file)
+  const getFileExtension = () => {
+    const extensions = {
+      javascript: 'js',
+      typescript: 'ts',
+      python: 'py',
+      java: 'java',
+      cpp: 'cpp',
+      csharp: 'cs',
+      php: 'php',
+      ruby: 'rb',
+      go: 'go',
+      rust: 'rs',
+      sql: 'sql',
+      html: 'html',
+      css: 'css',
+      json: 'json',
+      xml: 'xml',
+      yaml: 'yaml',
+      markdown: 'md',
+      dockerfile: 'dockerfile',
+      shell: 'sh',
+      plaintext: 'txt'
     }
+    return extensions[currentLanguage] || 'txt'
   }
 
-  const createNewFile = () => {
-    const newFile = {
-      id: Date.now(),
-      name: `untitled.${selectedLanguage === 'javascript' ? 'js' : selectedLanguage}`,
-      content: `// New ${selectedLanguage} file`,
-      language: selectedLanguage
+  const formatCode = () => {
+    if (editorRef.current) {
+      editorRef.current.getAction('editor.action.formatDocument').run()
+      toast.success('Code formatted!')
     }
-    setFiles([...files, newFile])
-    setActiveFile(newFile.id)
-    setCode(newFile.content)
   }
 
-  const deleteFile = (fileId) => {
-    if (files.length > 1) {
-      setFiles(files.filter(f => f.id !== fileId))
-      if (activeFile === fileId) {
-        setActiveFile(files[0].id)
-        setCode(files[0].content)
-      }
-      toast.success(language === 'fa' ? 'فایل حذف شد' : 'File deleted')
-    }
+  const toggleFullscreen = () => {
+    setIsFullscreen(!isFullscreen)
   }
 
-  useEffect(() => {
-    const activeFileData = files.find(f => f.id === activeFile)
-    if (activeFileData) {
-      setCode(activeFileData.content)
-      setSelectedLanguage(activeFileData.language)
-    }
-  }, [activeFile])
+  const clearTerminal = () => {
+    setTerminalOutput([])
+    toast.success('Terminal cleared!')
+  }
 
   return (
-    <div className="flex flex-col h-full space-y-4">
-      {/* Toolbar */}
-      <div className="flex items-center justify-between p-4 bg-gray-800 rounded-lg">
+    <div className={`flex flex-col h-full ${isFullscreen ? 'fixed inset-0 z-50 bg-gray-900' : ''}`}>
+      {/* Editor Header */}
+      <div className="flex items-center justify-between p-3 bg-gray-800 border-b border-gray-700">
         <div className="flex items-center space-x-reverse space-x-3">
+          <FaCode className="w-5 h-5 text-primary-400" />
+          <select
+            value={currentLanguage}
+            onChange={(e) => setCurrentLanguage(e.target.value)}
+            className="px-3 py-1 bg-gray-700 text-white rounded-lg text-sm focus:outline-none"
+          >
+            {languages.map(lang => (
+              <option key={lang.value} value={lang.value}>{lang.label}</option>
+            ))}
+          </select>
+          <span className="text-xs text-gray-400">
+            {code.split('\n').length} lines • {code.length} characters
+          </span>
+        </div>
+        
+        <div className="flex items-center space-x-reverse space-x-2">
           <button
-            onClick={runCode}
-            disabled={isRunning}
-            className="flex items-center space-x-reverse space-x-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 transition-all"
+            onClick={formatCode}
+            className="p-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-all"
+            title="Format Code"
           >
-            <FaPlay className="w-4 h-4" />
-            <span>{isRunning ? (language === 'fa' ? 'در حال اجرا...' : 'Running...') : (language === 'fa' ? 'اجرا' : 'Run')}</span>
+            <FaSync className="w-4 h-4" />
           </button>
-          
           <button
-            onClick={saveCode}
-            className="flex items-center space-x-reverse space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all"
+            onClick={handleSaveCode}
+            className="p-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-all"
+            title="Save"
           >
             <FaSave className="w-4 h-4" />
-            <span>{language === 'fa' ? 'ذخیره' : 'Save'}</span>
           </button>
-          
           <button
-            onClick={downloadCode}
-            className="flex items-center space-x-reverse space-x-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-all"
+            onClick={handleDownloadCode}
+            className="p-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-all"
+            title="Download"
           >
             <FaDownload className="w-4 h-4" />
-            <span>{language === 'fa' ? 'دانلود' : 'Download'}</span>
           </button>
-          
-          <label className="flex items-center space-x-reverse space-x-2 px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 cursor-pointer transition-all">
-            <FaUpload className="w-4 h-4" />
-            <span>{language === 'fa' ? 'آپلود' : 'Upload'}</span>
-            <input type="file" onChange={uploadFile} className="hidden" accept=".js,.py,.java,.html,.css,.json,.sql,.ts,.tsx" />
-          </label>
-          
           <button
-            onClick={createNewFile}
-            className="flex items-center space-x-reverse space-x-2 px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-all"
+            onClick={handleRunCode}
+            className="p-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-all"
+            title="Run Code"
           >
-            <FaFileCode className="w-4 h-4" />
-            <span>{language === 'fa' ? 'فایل جدید' : 'New File'}</span>
+            <FaPlay className="w-4 h-4" />
           </button>
-        </div>
-        
-        <div className="flex items-center space-x-reverse space-x-3">
-          <select
-            value={selectedLanguage}
-            onChange={(e) => setSelectedLanguage(e.target.value)}
-            className="px-3 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
-          >
-            {languages.map(lang => (
-              <option key={lang.id} value={lang.id}>{lang.name}</option>
-            ))}
-          </select>
-          
           <button
             onClick={() => setShowTerminal(!showTerminal)}
             className={`p-2 rounded-lg transition-all ${
-              showTerminal ? 'bg-primary-600 text-white' : 'bg-gray-700 text-gray-300'
+              showTerminal ? 'bg-primary-600 text-white' : 'bg-gray-700 text-white hover:bg-gray-600'
             }`}
+            title="Toggle Terminal"
           >
             <FaTerminal className="w-4 h-4" />
           </button>
-          
           <button
-            onClick={() => {
-              setFontSize(prev => prev === 14 ? 16 : prev === 16 ? 18 : 14)
-              toast.success(language === 'fa' ? `اندازه فونت: ${fontSize === 14 ? 16 : fontSize === 16 ? 18 : 14}px` : `Font size: ${fontSize === 14 ? 16 : fontSize === 16 ? 18 : 14}px`)
-
+            onClick={toggleFullscreen}
             className="p-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-all"
+            title="Toggle Fullscreen"
           >
-            <FaCog className="w-4 h-4" />
+            {isFullscreen ? <FaCompress className="w-4 h-4" /> : <FaExpand className="w-4 h-4" />}
           </button>
         </div>
       </div>
 
-      {/* File Tabs */}
-      <div className="flex items-center space-x-reverse space-x-1 p-2 bg-gray-800 rounded-lg overflow-x-auto">
-        {files.map(file => (
-          <button
-            key={file.id}
-            onClick={() => setActiveFile(file.id)}
-            className={`flex items-center space-x-reverse space-x-2 px-3 py-2 rounded-lg transition-all whitespace-nowrap ${
-              activeFile === file.id
-                ? 'bg-primary-600 text-white'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
-            }`}
-          >
-            <FaFile className="w-3 h-3" />
-            <span className="text-sm">{file.name}</span>
-            {files.length > 1 && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  deleteFile(file.id)
-
-                className="opacity-50 hover:opacity-100 transition-opacity"
-              >
-                ×
-              </button>
-            )}
-          </button>
-        ))}
+      {/* Editor Settings Bar */}
+      <div className="flex items-center justify-between px-3 py-2 bg-gray-750 border-b border-gray-700">
+        <div className="flex items-center space-x-reverse space-x-3">
+          <label className="flex items-center space-x-reverse space-x-2 text-xs text-gray-400">
+            <span>Font Size:</span>
+            <input
+              type="number"
+              value={fontSize}
+              onChange={(e) => setFontSize(parseInt(e.target.value))}
+              min="10"
+              max="24"
+              className="w-12 px-1 py-0.5 bg-gray-700 text-white rounded"
+            />
+          </label>
+          <label className="flex items-center space-x-reverse space-x-2 text-xs text-gray-400">
+            <input
+              type="checkbox"
+              checked={wordWrap}
+              onChange={(e) => setWordWrap(e.target.checked)}
+              className="rounded"
+            />
+            <span>Word Wrap</span>
+          </label>
+          <label className="flex items-center space-x-reverse space-x-2 text-xs text-gray-400">
+            <input
+              type="checkbox"
+              checked={minimap}
+              onChange={(e) => setMinimap(e.target.checked)}
+              className="rounded"
+            />
+            <span>Minimap</span>
+          </label>
+          <label className="flex items-center space-x-reverse space-x-2 text-xs text-gray-400">
+            <input
+              type="checkbox"
+              checked={lineNumbers}
+              onChange={(e) => setLineNumbers(e.target.checked)}
+              className="rounded"
+            />
+            <span>Line Numbers</span>
+          </label>
+        </div>
       </div>
 
-      {/* Editor and Output */}
-      <div className="flex-1 flex space-x-reverse space-x-4 min-h-0">
-        {/* Code Editor */}
-        <div className="flex-1 bg-gray-800 rounded-lg overflow-hidden">
-          <Editor
-            height="100%"
-            language={selectedLanguage}
-            value={code}
-            onChange={(value) => setCode(value)}
-            onMount={handleEditorDidMount}
-            theme={theme}
-            options={{
+      {/* Code Editor */}
+      <div className="flex-1 overflow-hidden">
+        <Editor
+          height="100%"
+          language={currentLanguage}
+          value={code}
+          onChange={(value) => setCode(value || '')}
+          theme={theme}
+          onMount={(editor) => {
+            editorRef.current = editor
+            editor.updateOptions({
               fontSize,
-              minimap: { enabled: false },
-              scrollBeyondLastLine: false,
+              wordWrap: wordWrap ? 'on' : 'off',
+              minimap: { enabled: minimap },
+              lineNumbers: lineNumbers ? 'on' : 'off',
               automaticLayout: true,
-              tabSize: 2,
-              wordWrap: 'on',
-              lineNumbers: 'on',
-              folding: true,
+              scrollBeyondLastLine: false,
               renderWhitespace: 'selection',
+              bracketPairColorization: { enabled: true },
+              guides: {
+                bracketPairs: true,
+                indentation: true
+              }
+            })
 
-          />
-        </div>
+          options={{
+            selectOnLineNumbers: true,
+            roundedSelection: false,
+            readOnly: false,
+            cursorStyle: 'line',
+            automaticLayout: true,
+            fontFamily: 'JetBrains Mono, Fira Code, Consolas, monospace',
+            fontLigatures: true
 
-        {/* Terminal/Output */}
-        <AnimatePresence>
-          {showTerminal && (
-            <motion.div
-              initial={{ width: 0, opacity: 0 }}
-              animate={{ width: '400px', opacity: 1 }}
-              exit={{ width: 0, opacity: 0 }}
-              className="bg-gray-800 rounded-lg overflow-hidden flex flex-col"
-            >
-              <div className="flex items-center justify-between p-3 bg-gray-900 border-b border-gray-700">
-                <div className="flex items-center space-x-reverse space-x-2">
-                  <FaTerminal className="w-4 h-4 text-green-400" />
-                  <span className="text-sm font-medium text-white">
-                    {language === 'fa' ? 'خروجی' : 'Output'}
-                  </span>
-                </div>
-                <div className="flex items-center space-x-reverse space-x-2">
-                  {isRunning && (
-                    <div className="flex space-x-reverse space-x-1">
-                      <div className="w-2 h-2 bg-green-400 rounded-full animate-bounce" />
-                      <div className="w-2 h-2 bg-green-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-                      <div className="w-2 h-2 bg-green-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
-                    </div>
-                  )}
-                  {errors.length === 0 && output && (
-                    <FaCheckCircle className="w-4 h-4 text-green-400" />
-                  )}
-                  {errors.length > 0 && (
-                    <FaExclamationTriangle className="w-4 h-4 text-red-400" />
-                  )}
-                </div>
+        />
+      </div>
+
+      {/* Terminal */}
+      <AnimatePresence>
+        {showTerminal && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 200, opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            className="bg-gray-900 border-t border-gray-700"
+          >
+            <div className="flex items-center justify-between p-2 bg-gray-800">
+              <div className="flex items-center space-x-reverse space-x-2">
+                <FaTerminal className="w-4 h-4 text-primary-400" />
+                <span className="text-sm text-gray-300">Terminal</span>
               </div>
-              
-              <div className="flex-1 p-4 overflow-y-auto font-mono text-sm">
-                {errors.length > 0 ? (
-                  <div className="space-y-2">
-                    {errors.map((error, index) => (
-                      <div key={index} className="p-2 bg-red-900 bg-opacity-30 border border-red-600 rounded text-red-400">
-                        <span className="font-medium">Error:</span> {error}
-                      </div>
-                    ))}
-                  </div>
-                ) : output ? (
-                  <pre className="text-green-400 whitespace-pre-wrap">{output}</pre>
-                ) : (
-                  <div className="text-gray-500">
-                    {language === 'fa' ? 'کد را اجرا کنید تا خروجی نمایش داده شود' : 'Run the code to see output'}
+              <button
+                onClick={clearTerminal}
+                className="p-1 bg-gray-700 text-white rounded hover:bg-gray-600 transition-all"
+              >
+                <FaTrash className="w-3 h-3" />
+              </button>
+            </div>
+            <div className="p-3 overflow-y-auto h-32 font-mono text-xs">
+              {terminalOutput.length === 0 ? (
+                <div className="text-gray-500">Terminal output will appear here...</div>
+              ) : (
+                terminalOutput.map((output, index) => (
+                  <div key={index} className="mb-2">
+                    <span className="text-gray-400">
+                      [{output.timestamp.toLocaleTimeString()}]
+                    </span>
+                    <span className={output.type === 'success' ? 'text-green-400' : 'text-red-400'}>
+                      {' '}{output.message}
+                    </span>
                   </div>
-                )}
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
+                ))
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   )
 }