admin08077/Githubgemini
0
1{"version":3,"file":"AiCodeExplainer-DGin5jQC.js","sources":["../../components/features/AiCodeExplainer.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';\nimport mermaid from 'mermaid';\nimport { explainCodeStructured, generateMermaidJs } from '../../services/index.ts';\nimport type { StructuredExplanation } from '../../types.ts';\nimport { useTheme } from '../../hooks/useTheme.ts';\nimport { CpuChipIcon } from '../icons.tsx';\nimport { MarkdownRenderer, LoadingSpinner } from '../shared/index.tsx';\n\nconst exampleCode = `const bubbleSort = (arr) => {\n for (let i = 0; i < arr.length; i++) {\n for (let j = 0; j < arr.length - i - 1; j++) {\n if (arr[j] > arr[j + 1]) {\n [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];\n }\n }\n }\n return arr;\n};`;\n\ntype ExplanationTab = 'summary' | 'lineByLine' | 'complexity' | 'suggestions' | 'flowchart';\n\nconst simpleSyntaxHighlight = (code: string) => {\n const escapedCode = code\n .replace(/&/g, '&')\n .replace(/</g, '<')\n .replace(/>/g, '>');\n\n return escapedCode\n .replace(/\\b(const|let|var|function|return|if|for|=>|import|from|export|default)\\b/g, '<span class=\"text-indigo-400 font-semibold\">$1</span>')\n .replace(/(\\`|'|\")(.*?)(\\`|'|\")/g, '<span class=\"text-emerald-400\">$1$2$3</span>')\n .replace(/(\\/\\/.*)/g, '<span class=\"text-gray-400 italic\">$1</span>')\n .replace(/(\\{|\\}|\\(|\\)|\\[|\\])/g, '<span class=\"text-gray-400\">$1</span>');\n};\n\nmermaid.initialize({ startOnLoad: false, securityLevel: 'loose' });\n\nexport const AiCodeExplainer: React.FC<{ initialCode?: string }> = ({ initialCode }) => {\n const [code, setCode] = useState<string>(initialCode || exampleCode);\n const [explanation, setExplanation] = useState<StructuredExplanation | null>(null);\n const [mermaidCode, setMermaidCode] = useState<string>('');\n const [isLoading, setIsLoading] = useState<boolean>(false);\n const [error, setError] = useState<string>('');\n const [activeTab, setActiveTab] = useState<ExplanationTab>('summary');\n const [themeState] = useTheme();\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const preRef = useRef<HTMLPreElement>(null);\n const mermaidContainerRef = useRef<HTMLDivElement>(null);\n\n const handleExplain = useCallback(async (codeToExplain: string) => {\n if (!codeToExplain.trim()) {\n setError('Please enter some code to explain.');\n return;\n }\n setIsLoading(true);\n setError('');\n setExplanation(null);\n setMermaidCode('');\n setActiveTab('summary');\n try {\n const [explanationResult, mermaidResult] = await Promise.all([\n explainCodeStructured(codeToExplain),\n generateMermaidJs(codeToExplain)\n ]);\n setExplanation(explanationResult);\n setMermaidCode(mermaidResult.replace(/```mermaid\\n|```/g, ''));\n\n } catch (err) {\n const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';\n setError(`Failed to get explanation: ${errorMessage}`);\n } finally {\n setIsLoading(false);\n }\n }, []);\n \n useEffect(() => {\n if (initialCode) {\n setCode(initialCode);\n handleExplain(initialCode);\n }\n }, [initialCode, handleExplain]);\n\n useEffect(() => {\n const renderMermaid = async () => {\n if (activeTab === 'flowchart' && mermaidCode && mermaidContainerRef.current) {\n try {\n mermaid.initialize({ startOnLoad: false, theme: themeState.mode === 'dark' ? 'dark' : 'neutral', securityLevel: 'loose' });\n mermaidContainerRef.current.innerHTML = ''; // Clear previous\n const { svg } = await mermaid.render(`mermaid-graph-${Date.now()}`, mermaidCode);\n mermaidContainerRef.current.innerHTML = svg;\n } catch (e) {\n console.error(\"Mermaid rendering error:\", e);\n mermaidContainerRef.current.innerHTML = `<p class=\"text-red-500\">Error rendering flowchart.</p>`;\n }\n }\n }\n renderMermaid();\n }, [activeTab, mermaidCode, themeState.mode]);\n\n\n const handleScroll = () => {\n if (preRef.current && textareaRef.current) {\n preRef.current.scrollTop = textareaRef.current.scrollTop;\n preRef.current.scrollLeft = textareaRef.current.scrollLeft;\n }\n };\n\n const highlightedCode = useMemo(() => simpleSyntaxHighlight(code), [code]);\n\n const renderTabContent = () => {\n if (!explanation) return null;\n switch(activeTab) {\n case 'summary':\n return <MarkdownRenderer content={explanation.summary} />;\n case 'lineByLine':\n return (\n <div className=\"space-y-3\">\n {explanation.lineByLine.map((item, index) => (\n <div key={index} className=\"p-3 bg-background rounded-md border border-border\">\n <p className=\"font-mono text-xs text-primary mb-1\">Lines: {item.lines}</p>\n <p className=\"text-sm\">{item.explanation}</p>\n </div>\n ))}\n </div>\n );\n case 'complexity':\n return (\n <div>\n <p><strong>Time Complexity:</strong> <span className=\"font-mono text-amber-600\">{explanation.complexity.time}</span></p>\n <p><strong>Space Complexity:</strong> <span className=\"font-mono text-amber-600\">{explanation.complexity.space}</span></p>\n </div>\n );\n case 'suggestions':\n return (\n <ul className=\"list-disc list-inside space-y-2\">\n {explanation.suggestions.map((item, index) => <li key={index}>{item}</li>)}\n </ul>\n );\n case 'flowchart':\n return (\n <div ref={mermaidContainerRef} className=\"w-full h-full flex items-center justify-center\">\n <LoadingSpinner />\n </div>\n );\n }\n }\n\n return (\n <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n <header className=\"mb-6 flex-shrink-0\">\n <h1 className=\"text-3xl font-bold flex items-center\">\n <CpuChipIcon />\n <span className=\"ml-3\">AI Code Explainer</span>\n </h1>\n <p className=\"text-text-secondary mt-1\">Get a detailed, structured analysis of any code snippet.</p>\n </header>\n <div className=\"flex-grow grid grid-cols-1 md:grid-cols-2 gap-6 min-h-0\">\n \n {/* Left Column: Code Input */}\n <div className=\"flex flex-col min-h-0 md:col-span-1\">\n <label htmlFor=\"code-input\" className=\"text-sm font-medium text-text-secondary mb-2\">Your Code</label>\n <div className=\"relative flex-grow bg-surface border border-border rounded-md focus-within:ring-2 focus-within:ring-primary overflow-hidden\">\n <textarea\n ref={textareaRef}\n id=\"code-input\"\n value={code}\n onChange={(e) => setCode(e.target.value)}\n onScroll={handleScroll}\n placeholder=\"Paste your code here...\"\n spellCheck=\"false\"\n className=\"absolute inset-0 w-full h-full p-4 bg-transparent resize-none font-mono text-sm text-transparent caret-primary outline-none z-10\"\n />\n <pre \n ref={preRef}\n aria-hidden=\"true\"\n className=\"absolute inset-0 w-full h-full p-4 font-mono text-sm text-text-primary pointer-events-none z-0 whitespace-pre-wrap overflow-auto no-scrollbar\"\n dangerouslySetInnerHTML={{ __html: highlightedCode + '\\n' }}\n />\n </div>\n <div className=\"mt-4 flex-shrink-0\">\n <button\n onClick={() => handleExplain(code)}\n disabled={isLoading}\n className=\"btn-primary w-full flex items-center justify-center px-6 py-3\"\n >\n {isLoading ? <LoadingSpinner/> : 'Analyze Code'}\n </button>\n </div>\n </div>\n\n {/* Right Column: AI Analysis */}\n <div className=\"flex flex-col min-h-0 md:col-span-1\">\n <label className=\"text-sm font-medium text-text-secondary mb-2\">AI Analysis</label>\n <div className=\"relative flex-grow flex flex-col bg-surface border border-border rounded-md overflow-hidden\">\n <div className=\"flex-shrink-0 flex border-b border-border\">\n {(['summary', 'lineByLine', 'complexity', 'suggestions', 'flowchart'] as ExplanationTab[]).map(tab => (\n <button key={tab} onClick={() => setActiveTab(tab)} disabled={!explanation}\n className={`px-4 py-2 text-sm font-medium capitalize transition-colors ${activeTab === tab ? 'bg-background text-primary font-semibold' : 'text-text-secondary hover:bg-gray-100 dark:hover:bg-slate-700 disabled:text-gray-400 dark:disabled:text-slate-500'}`}>\n {tab.replace(/([A-Z])/g, ' $1')}\n </button>\n ))}\n </div>\n <div className=\"p-4 flex-grow overflow-y-auto\">\n {isLoading && <div className=\"flex items-center justify-center h-full\"><LoadingSpinner /></div>}\n {error && <p className=\"text-red-500\">{error}</p>}\n {explanation && !isLoading && renderTabContent()}\n {!isLoading && !explanation && !error && <div className=\"text-text-secondary h-full flex items-center justify-center\">The analysis will appear here.</div>}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};"],"names":["exampleCode","simpleSyntaxHighlight","code","mermaid","AiCodeExplainer","initialCode","setCode","useState","explanation","setExplanation","mermaidCode","setMermaidCode","isLoading","setIsLoading","error","setError","activeTab","setActiveTab","themeState","useTheme","textareaRef","useRef","preRef","mermaidContainerRef","handleExplain","useCallback","codeToExplain","explanationResult","mermaidResult","explainCodeStructured","generateMermaidJs","err","errorMessage","useEffect","svg","e","handleScroll","highlightedCode","useMemo","renderTabContent","jsx","MarkdownRenderer","item","index","jsxs","LoadingSpinner","CpuChipIcon","tab"],"mappings":"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"}