Skip to content

Commit 4ba5a9e

Browse files
codeXsiddcodeXsidd
authored
Merge pull request #11 from codeXsidd/dev
style: Enhance CodeInsight UI readability with markdown processing, p…
2 parents 0e8e8ff + d1bcd24 commit 4ba5a9e

File tree

1 file changed

+65
-46
lines changed

1 file changed

+65
-46
lines changed

‎frontend/src/pages/CodeInsightPage.jsx‎

Lines changed: 65 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,25 @@ import { Code2, Play, Cpu, Zap, Activity, Info, AlertTriangle, FastForward, Chec
44
import Editor from '@monaco-editor/react';
55
import toast from 'react-hot-toast';
66
import { analyzeCode } from '../services/api';
7+
const FormattedText = ({ text }) => {
8+
if (!text) return null;
9+
return (
10+
<span style={{ whiteSpace: 'pre-wrap', lineHeight: 1.8 }}>
11+
{text.split(/(\*\*.*?\*\*|\*.*?\*|`.*?`)/g).map((part, i) => {
12+
if (part.startsWith('**') && part.endsWith('**')) {
13+
return <strong key={i} style={{ color: '#f8fafc', fontWeight: 800 }}>{part.slice(2, -2)}</strong>;
14+
}
15+
if (part.startsWith('*') && part.endsWith('*')) {
16+
return <em key={i} style={{ color: '#cbd5e1' }}>{part.slice(1, -1)}</em>;
17+
}
18+
if (part.startsWith('`') && part.endsWith('`')) {
19+
return <code key={i} style={{ background: 'rgba(255,255,255,0.08)', color: '#38bdf8', padding: '0.2rem 0.4rem', borderRadius: '6px', fontSize: '0.85em', fontFamily: 'monospace', border: '1px solid rgba(255,255,255,0.1)' }}>{part.slice(1, -1)}</code>;
20+
}
21+
return part;
22+
})}
23+
</span>
24+
);
25+
};
726

827
const CodeInsightPage = () => {
928
const boilerplates = {
@@ -164,89 +183,89 @@ const CodeInsightPage = () => {
164183

165184
{activeTab === 'Explanation' && (
166185
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }} className="animate-fade-in">
167-
<div style={{ padding: '1rem', borderRadius: '12px', background: 'linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.02))', border: '1px solid rgba(16,185,129,0.2)' }}>
168-
<h3 style={{ fontSize: '0.85rem', color: '#10b981', fontWeight: 800, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: 6 }}><Info size={16} /> 🧠 Simple Summary</h3>
169-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.6 }}>{result.simpleSummary}</p>
186+
<div style={{ padding: '1.25rem', borderRadius: '16px', background: 'linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.02))', border: '1px solid rgba(16,185,129,0.25)' }}>
187+
<h3 style={{ fontSize: '0.9rem', color: '#10b981', fontWeight: 800, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 8 }}><Info size={18} /> 🧠 Simple Summary</h3>
188+
<p style={{ fontSize: '0.95rem', color: '#e2e8f0', lineHeight: 1.8, letterSpacing: '0.01em' }}><FormattedText text={result.simpleSummary} /></p>
170189
</div>
171190

172-
<div style={{ padding: '1rem', borderRadius: '12px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)' }}>
173-
<h3 style={{ fontSize: '0.85rem', color: '#fbbf24', fontWeight: 800, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: 6 }}><FastForward size={16} /> 📦 Real-Life Analogy</h3>
174-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.6, fontStyle: 'italic' }}>"{result.analogy}"</p>
191+
<div style={{ padding: '1.25rem', borderRadius: '16px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.08)' }}>
192+
<h3 style={{ fontSize: '0.9rem', color: '#fbbf24', fontWeight: 800, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 8 }}><FastForward size={18} /> 📦 Real-Life Analogy</h3>
193+
<p style={{ fontSize: '0.95rem', color: '#cbd5e1', lineHeight: 1.8, fontStyle: 'italic', letterSpacing: '0.01em' }}>"<FormattedText text={result.analogy} />"</p>
175194
</div>
176195

177-
<div style={{ padding: '1.25rem', borderRadius: '12px', background: 'rgba(99,102,241,0.05)', border: '1px solid rgba(99,102,241,0.15)' }}>
178-
<h3 style={{ fontSize: '0.85rem', color: '#818cf8', fontWeight: 800, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 6 }}><Cpu size={16} /> ⚙️ What Happens in the Background</h3>
179-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{result.backgroundExecution}</p>
196+
<div style={{ padding: '1.5rem', borderRadius: '16px', background: 'rgba(99,102,241,0.08)', border: '1px solid rgba(99,102,241,0.2)', boxShadow: 'inset 0 0 20px rgba(99,102,241,0.05)' }}>
197+
<h3 style={{ fontSize: '0.95rem', color: '#818cf8', fontWeight: 800, marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: 8 }}><Cpu size={18} /> ⚙️ What Happens in the Background</h3>
198+
<p style={{ fontSize: '0.95rem', color: '#f1f5f9', lineHeight: 1.9, letterSpacing: '0.01em' }}><FormattedText text={result.backgroundExecution} /></p>
180199
</div>
181200

182201
<div>
183-
<h3 style={{ fontSize: '0.85rem', color: '#94a3b8', fontWeight: 800, marginBottom: '0.75rem', textTransform: 'uppercase' }}>📖 Step-by-Step Explanation</h3>
202+
<h3 style={{ fontSize: '0.9rem', color: '#94a3b8', fontWeight: 800, marginBottom: '1rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>📖 Step-by-Step Explanation</h3>
184203
{result.stepByStep && result.stepByStep.length > 0 ? (
185-
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
204+
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
186205
{result.stepByStep.map((step, idx) => (
187-
<div key={idx} style={{ padding: '0.75rem', borderRadius: '8px', background: 'rgba(255,255,255,0.02)', borderLeft: '3px solid #6366f1' }}>
188-
<span style={{ fontSize: '0.75rem', fontWeight: 800, color: '#818cf8', marginBottom: '0.25rem', display: 'block' }}>Line {step.line || '?'}</span>
189-
<p style={{ fontSize: '0.85rem', color: '#e2e8f0', lineHeight: 1.5 }}>{step.explanation}</p>
206+
<div key={idx} style={{ padding: '1rem 1.25rem', borderRadius: '10px', background: 'rgba(255,255,255,0.02)', borderLeft: '4px solid #6366f1', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
207+
<span style={{ fontSize: '0.8rem', fontWeight: 800, color: '#818cf8', display: 'inline-block' }}>LINE {step.line || '?'}</span>
208+
<p style={{ fontSize: '0.95rem', color: '#cbd5e1', lineHeight: 1.8 }}><FormattedText text={step.explanation} /></p>
190209
</div>
191210
))}
192211
</div>
193212
) : (
194-
<p style={{ color: '#94a3b8', fontSize: '0.85rem' }}>No step-by-step data available.</p>
213+
<p style={{ color: '#94a3b8', fontSize: '0.9rem' }}>No step-by-step data available.</p>
195214
)}
196215
</div>
197216
</div>
198217
)}
199218

200219
{activeTab === 'Simulation' && (
201-
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }} className="animate-fade-in">
202-
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
203-
<div style={{ padding: '1rem', borderRadius: '12px', background: 'linear-gradient(135deg, rgba(239,68,68,0.1), rgba(0,0,0,0))', border: '1px solid rgba(239,68,68,0.2)' }}>
204-
<h3 style={{ fontSize: '0.85rem', color: '#fca5a5', fontWeight: 700, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: 6 }}><Activity size={16} /> ⏱ Time Complexity</h3>
205-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.5 }}>{result.timeComplexity}</p>
220+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }} className="animate-fade-in">
221+
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: '1.25rem' }}>
222+
<div style={{ padding: '1.25rem', borderRadius: '16px', background: 'linear-gradient(135deg, rgba(239,68,68,0.1), rgba(0,0,0,0))', border: '1px solid rgba(239,68,68,0.2)' }}>
223+
<h3 style={{ fontSize: '0.9rem', color: '#fca5a5', fontWeight: 700, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 8 }}><Activity size={18} /> ⏱ Time Complexity</h3>
224+
<p style={{ fontSize: '0.95rem', color: '#e2e8f0', lineHeight: 1.8 }}><FormattedText text={result.timeComplexity} /></p>
206225
</div>
207-
<div style={{ padding: '1rem', borderRadius: '12px', background: 'linear-gradient(135deg, rgba(56,189,248,0.1), rgba(0,0,0,0))', border: '1px solid rgba(56,189,248,0.2)' }}>
208-
<h3 style={{ fontSize: '0.85rem', color: '#7dd3fc', fontWeight: 700, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: 6 }}><Code2 size={16} /> 💾 Space Complexity</h3>
209-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.5 }}>{result.spaceComplexity}</p>
226+
<div style={{ padding: '1.25rem', borderRadius: '16px', background: 'linear-gradient(135deg, rgba(56,189,248,0.1), rgba(0,0,0,0))', border: '1px solid rgba(56,189,248,0.2)' }}>
227+
<h3 style={{ fontSize: '0.9rem', color: '#7dd3fc', fontWeight: 700, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 8 }}><Code2 size={18} /> 💾 Space Complexity</h3>
228+
<p style={{ fontSize: '0.95rem', color: '#e2e8f0', lineHeight: 1.8 }}><FormattedText text={result.spaceComplexity} /></p>
210229
</div>
211230
</div>
212231

213-
<div style={{ padding: '1rem', borderRadius: '12px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)' }}>
214-
<h3 style={{ fontSize: '0.85rem', color: '#94a3b8', fontWeight: 800, marginBottom: '0.75rem', textTransform: 'uppercase' }}>🔄 Dry Run (Execution Flow)</h3>
215-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{result.dryRun}</p>
232+
<div style={{ padding: '1.25rem', borderRadius: '16px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.08)' }}>
233+
<h3 style={{ fontSize: '0.9rem', color: '#94a3b8', fontWeight: 800, marginBottom: '1rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>🔄 Dry Run (Execution Flow)</h3>
234+
<p style={{ fontSize: '0.95rem', color: '#cbd5e1', lineHeight: 1.8 }}><FormattedText text={result.dryRun} /></p>
216235
</div>
217236

218-
<div style={{ padding: '1rem', borderRadius: '12px', background: '#0a0a10', border: '1px dashed rgba(255,255,255,0.1)' }}>
219-
<h3 style={{ fontSize: '0.85rem', color: '#10b981', fontWeight: 800, marginBottom: '0.75rem', textTransform: 'uppercase' }}>🎥 Visualization</h3>
220-
<pre style={{ margin: 0, fontSize: '0.85rem', color: '#10b981', fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>{result.visualization}</pre>
237+
<div style={{ padding: '1.5rem', borderRadius: '16px', background: 'rgba(5, 5, 10, 0.8)', border: '1px solid rgba(16,185,129,0.3)', boxShadow: 'inset 0 0 30px rgba(16,185,129,0.05)' }}>
238+
<h3 style={{ fontSize: '0.95rem', color: '#10b981', fontWeight: 800, marginBottom: '1rem', textTransform: 'uppercase', letterSpacing: '0.05em', display: 'flex', alignItems: 'center', gap: 8 }}><Play size={18} /> 🎥 Visualization</h3>
239+
<pre style={{ margin: 0, fontSize: '0.95rem', color: '#34d399', fontFamily: 'monospace', whiteSpace: 'pre-wrap', lineHeight: 2 }}>{result.visualization}</pre>
221240
</div>
222241
</div>
223242
)}
224243

225244
{activeTab === 'Optimization' && (
226-
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }} className="animate-fade-in">
227-
<div style={{ padding: '1rem', borderRadius: '12px', background: 'rgba(239,68,68,0.05)', border: '1px solid rgba(239,68,68,0.15)' }}>
228-
<h3 style={{ fontSize: '0.85rem', color: '#f87171', fontWeight: 800, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: 6 }}><AlertTriangle size={16} /> 🔍 Mistake Detection</h3>
229-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{result.mistakes}</p>
245+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }} className="animate-fade-in">
246+
<div style={{ padding: '1.25rem', borderRadius: '16px', background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)' }}>
247+
<h3 style={{ fontSize: '0.95rem', color: '#f87171', fontWeight: 800, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 8 }}><AlertTriangle size={18} /> 🔍 Mistake Detection</h3>
248+
<p style={{ fontSize: '0.95rem', color: '#f1f5f9', lineHeight: 1.8 }}><FormattedText text={result.mistakes} /></p>
230249
</div>
231250

232-
<div style={{ padding: '1rem', borderRadius: '12px', background: 'rgba(16,185,129,0.05)', border: '1px solid rgba(16,185,129,0.15)' }}>
233-
<h3 style={{ fontSize: '0.85rem', color: '#10b981', fontWeight: 800, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: 6 }}><Zap size={16} /> ⚡ Optimal Solution</h3>
234-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{result.optimalSolution}</p>
251+
<div style={{ padding: '1.25rem', borderRadius: '16px', background: 'rgba(16,185,129,0.08)', border: '1px solid rgba(16,185,129,0.2)' }}>
252+
<h3 style={{ fontSize: '0.95rem', color: '#10b981', fontWeight: 800, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 8 }}><Zap size={18} /> ⚡ Optimal Solution</h3>
253+
<p style={{ fontSize: '0.95rem', color: '#f1f5f9', lineHeight: 1.8 }}><FormattedText text={result.optimalSolution} /></p>
235254
</div>
236255

237-
<div style={{ padding: '1rem', borderRadius: '12px', background: '#1e1e2f', border: '1px solid rgba(255,255,255,0.1)' }}>
238-
<h3 style={{ fontSize: '0.85rem', color: '#e2e8f0', fontWeight: 800, marginBottom: '0.75rem', textTransform: 'uppercase' }}>💻 Optimized Code</h3>
239-
<pre style={{ margin: 0, fontSize: '0.85rem', color: '#a78bfa', fontFamily: 'monospace', whiteSpace: 'pre-wrap', overflowX: 'auto' }}>{result.optimizedCode}</pre>
256+
<div style={{ padding: '1.5rem', borderRadius: '16px', background: '#0a0a0f', border: '1px solid rgba(167,139,250,0.3)', boxShadow: 'inset 0 0 20px rgba(167,139,250,0.05)' }}>
257+
<h3 style={{ fontSize: '0.95rem', color: '#a78bfa', fontWeight: 800, marginBottom: '1rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>💻 Optimized Code</h3>
258+
<pre style={{ margin: 0, fontSize: '0.95rem', color: '#c4b5fd', fontFamily: 'monospace', whiteSpace: 'pre-wrap', lineHeight: 1.8, overflowX: 'auto' }}>{result.optimizedCode}</pre>
240259
</div>
241260

242-
<div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '1rem' }}>
243-
<div style={{ padding: '1rem', borderRadius: '12px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)' }}>
244-
<h3 style={{ fontSize: '0.85rem', color: '#94a3b8', fontWeight: 800, marginBottom: '0.5rem', textTransform: 'uppercase' }}>🚀 Beginner Tips</h3>
245-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{result.beginnerTips}</p>
261+
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: '1.25rem' }}>
262+
<div style={{ padding: '1.25rem', borderRadius: '16px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.08)' }}>
263+
<h3 style={{ fontSize: '0.9rem', color: '#94a3b8', fontWeight: 800, marginBottom: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>🚀 Beginner Tips</h3>
264+
<p style={{ fontSize: '0.95rem', color: '#cbd5e1', lineHeight: 1.8 }}><FormattedText text={result.beginnerTips} /></p>
246265
</div>
247-
<div style={{ padding: '1rem', borderRadius: '12px', background: 'rgba(99,102,241,0.05)', border: '1px solid rgba(99,102,241,0.15)' }}>
248-
<h3 style={{ fontSize: '0.85rem', color: '#818cf8', fontWeight: 800, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: 6 }}><CheckCircle2 size={16} /> 🧪 Interview Insight</h3>
249-
<p style={{ fontSize: '0.9rem', color: '#e2e8f0', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{result.interviewInsight}</p>
266+
<div style={{ padding: '1.25rem', borderRadius: '16px', background: 'rgba(99,102,241,0.08)', border: '1px solid rgba(99,102,241,0.2)' }}>
267+
<h3 style={{ fontSize: '0.95rem', color: '#818cf8', fontWeight: 800, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 8 }}><CheckCircle2 size={18} /> 🧪 Interview Insight</h3>
268+
<p style={{ fontSize: '0.95rem', color: '#e2e8f0', lineHeight: 1.8 }}><FormattedText text={result.interviewInsight} /></p>
250269
</div>
251270
</div>
252271
</div>

0 commit comments

Comments
 (0)