🎨 Visual Aid — generate a diagram for this topic

{!svg && ( {busy ? <> Generating… : "✨ Generate Diagram"} )} {err &&

{err}

} {svg && ( ); } // ── MessageBubble ───────────────────────────────────────────────────────── function MessageBubble({ msg }) { const isUser = msg.role === "user"; const parts = (msg.content || "").split(/IMAGE_PROMPT:\s*/); const text = parts[0].trim(); const imgP = parts[1]?.trim(); function renderText(t) { return t.split("\n").map((line, i) => { const html = line .replace(/\*\*(.*?)\*\*/g, "$1") .replace(/^(#{1,3})\s(.+)/, (_,h,c) => `${c}`); return

; }); } return (

); } // ── Main App ────────────────────────────────────────────────────────────── function App() { const [view, setView] = React.useState("home"); const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const [docText, setDocText] = React.useState(""); const [docName, setDocName] = React.useState(""); const fileRef = React.useRef(); const bottomRef = React.useRef(); const taRef = React.useRef(); function scrollDown() { setTimeout(() => bottomRef.current?.scrollIntoView({behavior:"smooth"}), 80); } // auto-resize textarea function handleInput(e) { setInput(e.target.value); const ta = taRef.current; if (ta) { ta.style.height="auto"; ta.style.height = Math.min(ta.scrollHeight,120)+"px"; } } async function handleFile(file) { if (!file) return; setDocName(file.name); if (file.type==="text/plain" || file.name.endsWith(".md") || file.name.endsWith(".txt")) { const t = await file.text(); setDocText(t.slice(0,8000)); } else { // PDF / DOC — we can't parse binary on bare HTML, so we flag it setDocText(`[File uploaded: ${file.name}] — Please ask me questions and I will help you study this topic based on your questions.`); } setView("chat"); } async function send(override) { const text = (override || input).trim(); if (!text || loading) return; setInput(""); if (taRef.current) taRef.current.style.height = "auto"; setView("chat"); const userMsg = { role:"user", content: text }; const apiContent = docText ? `Document uploaded ("${docName}"):\n\n${docText}\n\n---\nStudent question: ${text}` : text; const history = [...messages, userMsg]; setMessages([...history, { role:"assistant", content:"", loading:true }]); scrollDown(); setLoading(true); const apiMessages = history.map((m, i) => (i === history.length-1 && docText) ? { role:"user", content: apiContent } : { role: m.role, content: m.content } ); try { const data = await callAPI(apiMessages); const reply = data.content?.[0]?.text || "Sorry, I couldn't get a response. Please try again."; setMessages([...history, { role:"assistant", content: reply }]); } catch { setMessages([...history, { role:"assistant", content:"⚠️ Error connecting to AI. Check your API key in the HTML file." }]); } setLoading(false); scrollDown(); } function reset() { setMessages([]); setDocText(""); setDocName(""); setView("home"); } function startSubject(s) { setView("chat"); setTimeout(() => send(`I want to study ${s.label}. Give me a simple overview of the most important topics I should know.`), 50); } // ── Header ── const Header = () => (

📖

SmartRevision.blog

AI STUDY COMPANION

{docName && (

📄 {docName} {setDocText("");setDocName("");}} style={{background:"none",border:"none",cursor:"pointer",color:C.gold,fontSize:15,lineHeight:1,padding:0}}>×

)} fileRef.current?.click()} style={{ background:"rgba(229,69,96,.15)",border:"1px solid rgba(229,69,96,.3)", borderRadius:8,padding:"6px 12px",fontSize:12,color:C.accent,cursor:"pointer",fontWeight:600 }}>📎 Upload

handleFile(e.target.files[0])}/>

); // ── Input bar ── const InputBar = () => (