Spaces:
Runtime error
Runtime error
| import React from 'react'; | |
| import { MathJax } from 'better-react-mathjax'; | |
| export const isMathQuery = (q) => { | |
| return /[\d+\-*/^=()[\]{}]/.test(q) || q.toLowerCase().includes('solve') || q.toLowerCase().includes('plot'); | |
| }; | |
| export const getSuggestedQueries = (topic) => { | |
| const suggestions = { | |
| 'Quadratic Equation': ['solve x^2 + 5x + 6 = 0', 'plot y = x^2 - 4x + 4'], | |
| 'Fourier Transform': ['Fourier transform of rect(t)', 'FourierTransform[exp(-a t^2), t, w]'], | |
| 'Linear Algebra': ['eigenvalues {{1,2},{3,4}}', 'det {{a,b},{c,d}}'], | |
| 'Calculus': ['derivative of sin(x) * exp(x)', 'integrate log(x) from 1 to e'], | |
| 'Stochastic Calculus': ['Brownian motion path', 'Ito integral example'], | |
| }; | |
| return suggestions[topic] || [`properties of ${topic}`, `plot ${topic} function`]; | |
| }; | |
| export const formatAIText = (text) => { | |
| if (!text) return null; | |
| const SECTIONS = [ | |
| { | |
| key: 'SIMPLE EXPLANATION:', | |
| label: 'Simple Explanation', | |
| icon: '💡', | |
| accent: 'from-blue-500 to-indigo-500', | |
| bg: 'bg-blue-50 dark:bg-blue-950/30', | |
| border: 'border-blue-200 dark:border-blue-800/50', | |
| tag: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300', | |
| }, | |
| { | |
| key: 'INTUITION:', | |
| label: 'Intuition', | |
| icon: '🧠', | |
| accent: 'from-violet-500 to-purple-500', | |
| bg: 'bg-violet-50 dark:bg-violet-950/30', | |
| border: 'border-violet-200 dark:border-violet-800/50', | |
| tag: 'bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300', | |
| }, | |
| { | |
| key: 'EXAMPLE:', | |
| label: 'Example', | |
| icon: '⚡', | |
| accent: 'from-amber-500 to-orange-500', | |
| bg: 'bg-amber-50 dark:bg-amber-950/30', | |
| border: 'border-amber-200 dark:border-amber-800/50', | |
| tag: 'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300', | |
| isCode: true, | |
| }, | |
| { | |
| key: 'USED IN:', | |
| label: 'Used In', | |
| icon: '🔗', | |
| accent: 'from-emerald-500 to-teal-500', | |
| bg: 'bg-emerald-50 dark:bg-emerald-950/30', | |
| border: 'border-emerald-200 dark:border-emerald-800/50', | |
| tag: 'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300', | |
| }, | |
| ]; | |
| const blocks = text.split('\n\n'); | |
| return ( | |
| <MathJax> | |
| <div className="space-y-4"> | |
| {blocks.map((block, i) => { | |
| const section = SECTIONS.find(s => block.startsWith(s.key)); | |
| if (section) { | |
| const lines = block.split('\n'); | |
| const bodyLines = lines.slice(1).join('\n').trim(); | |
| return ( | |
| <div key={i} className={`rounded-xl border overflow-hidden ${section.border}`}> | |
| {/* Section header */} | |
| <div className={`flex items-center gap-2.5 px-4 py-2.5 bg-gradient-to-r ${section.accent}`}> | |
| <span className="text-base">{section.icon}</span> | |
| <span className="text-xs font-bold text-white uppercase tracking-widest">{section.label}</span> | |
| </div> | |
| {/* Section body */} | |
| <div className={`px-4 py-4 ${section.bg}`}> | |
| {section.isCode || bodyLines.includes('=') || bodyLines.includes('f(') ? ( | |
| <div className="bg-slate-900 dark:bg-black rounded-lg p-4 font-mono text-sm text-emerald-300 overflow-x-auto shadow-inner border border-slate-700"> | |
| <pre className="whitespace-pre-wrap leading-relaxed">{bodyLines}</pre> | |
| </div> | |
| ) : ( | |
| <p className="text-sm leading-relaxed text-slate-700 dark:text-slate-300"> | |
| {bodyLines} | |
| </p> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } | |
| // Fallback for unrecognised paragraphs | |
| if (block.trim()) { | |
| return ( | |
| <p key={i} className="text-sm leading-relaxed text-slate-600 dark:text-slate-400"> | |
| {block} | |
| </p> | |
| ); | |
| } | |
| return null; | |
| })} | |
| </div> | |
| </MathJax> | |
| ); | |
| }; | |