API Chatbot Tutorial Steps 1-3

Build a single-file HTML chatbot using vanilla JavaScript (no frameworks). Output only the complete file. LAYOUT - Mobile-first: full-screen on phones, a 420px centered card on desktop. - Blue header showing the model name, white bot bubbles on the left, blue user bubbles on the right, a sticky input bar with a Send button. - Respect safe-area insets and use 100dvh so the keyboard doesn't break the layout. CONFIG - Constants at the top of the script: API_URL, API_KEY, MODEL, MAX_TURNS = 12, SYSTEM_MSG, WELCOME. - Example using a Xiaomi Mimo token plan: const API_URL = 'https://token-plan-sgp.xiaomimimo.com/v1/chat/completions'; const API_KEY = 'API_Key_Placeholder'; // Mimo model const MODEL = 'mimo-v2.6-pro'; const MAX_TURNS = 12; const SYSTEM_MSG = { role: 'system', content: 'You are a helpful assistant.' }; API - Call an OpenAI-compatible /v1/chat/completions endpoint with fetch and stream: true. - Parse the SSE stream (data: {...} lines and [DONE]) and handle chunks that split mid-line. RENDERING - While streaming, show plain text with a blinking cursor. - When the reply finishes, render Markdown with marked.js and sanitize it with DOMPurify (load both from a CDN). - Code blocks and tables must scroll horizontally inside the bubble and never overflow the screen. BEHAVIOR - Keep conversation memory, trimmed to the last MAX_TURNS turns plus the system message. - Typing /delete clears the chat and the memory. - Disable the input while a reply is streaming; send on Enter. - If the request fails, show a friendly error in the bubble and don't save a broken turn. - Think through edge cases: partial SSE chunks, errors mid-stream, empty replies, and history trimming.