Lumo Chat

Settings

Custom system prompt

Prompt files

Attached text files are saved and sent as part of the system prompt with every message. They show up as filename + upload time — the full text is never rendered in the chat. Files can only be added or removed here in Settings.

Applied to every message. Click Done (or the gear again) to hide settings.

Lumo Chat — Documentation

What this is

A single-file chat interface that talks to the Proton Lumo API directly from the browser. No dependencies, no build step, no server of its own — everything runs locally in the page and the only network traffic is the chat itself.

The header

• The chat title doubles as the clear button — clicking anywhere in the title bar deletes every chat message. The welcome card and the system message are never cleared.
• "by SmilerRyan" is the credit line.

Messages

• Your messages are editable: click into the text and change it. Pressing Enter (without Shift) saves the edit, deletes that message and everything below it, re-adds the edited message and generates a fresh response from that point. Shift+Enter makes a newline without resending.
• Model messages are rendered from markdown (see below) and arrive streamed, token by token, as the model generates.
• Hovering any message shows two buttons in the top-right corner:
  • × — delete that single message. Deleting a message that is currently streaming also stops the generation.
  • ↺ — rewind: stops any running generation and deletes every message below this one. This message and everything above it are kept. On the system message at the top this wipes the whole conversation while keeping the system message itself.
• The welcome card at the top is a quick cheat-sheet. It is never sent to the API and never cleared.
• The system message below it mirrors your custom system prompt and prompt files. Clicking it opens Settings. It is only visible (and only sent) when a prompt or files are actually set, and is edited exclusively through Settings.
• If a request fails, an error bubble appears with the HTTP reason and is kept in history like any other message.
• Generated images — when the model calls generate_image / edit_image, a status line shows while the tool runs, then the finished image is rendered inline in the reply and saved with the message so it survives reloads.

The composer

• Enter sends, Shift+Enter makes a newline. The box grows as you type up to 200px, then scrolls internally.
• Sending is blocked while attachments are still loading; the message goes out the moment they finish.

Composer buttons, left to right

• ⚙ Settings — opens/closes the Settings panel (see below).
• Model dropdown — chooses which model answers: lumo-lite, lumo-max or apertus-15. Your choice is remembered across visits.
• ■ Stop — only visible while a response is streaming. Cancels the stream; everything generated so far is kept.
• Context meter — estimates how much context is being sent with the next message (roughly one token per 4 characters, plus a flat cost per image), against a 128k token ceiling. The bar is the accent colour normally, amber above 75% and red above 90%. It updates as you type, edit, attach or delete anything.
• 🎤 Voice input — Chrome only. Click the mic to cycle the mode:
  • Off (default) — microphone disabled. Always the state when the page opens — the mode is never remembered between visits.
  • Write mode — the button turns light red and shows "write". Dictates into the text box. Words are inserted at the cursor the instant they are recognised and never rewritten or corrected. Two seconds of silence stops the microphone automatically and the text is left in the box UNSENT — you send it yourself whenever you're ready.
  • Auto send mode — the button turns dark red. Same dictation, plus the message auto-sends about 2 seconds after you stop speaking. If the AI is reading a reply aloud at that moment, sending waits until the voice finishes. Clicking the mic again turns it off.
• ✨ AI clean — sends the current text box contents to lumo-max to strip filler words, false starts and dictation artefacts, and fix grammar/punctuation, then writes the cleaned text back in place. Fully manual — the microphone never triggers it. If the request fails the original text is left untouched.
• 😀 Emoji — opens the emoji picker by inserting ":" at the cursor.
• 🎨 Sketch — opens a drawing pad. Draw with mouse/touch, pick colour, pen size, eraser and clear, then hit Attach to put the sketch straight into the attachment slot as an image. Any text in the composer travels with it as the explanation, same as a pasted image.
• Send — same as pressing Enter.
• 🔊 Voice output — opens a list of every voice installed on your computer, plus "No voice". The current pick gets a tick. Picking a voice makes finished replies get read aloud. Code blocks are skipped entirely (not spoken at all) and bold markers are spoken as the word only, never "star". Replies that have been rewound or deleted are never spoken. The choice is saved and restored on every visit; a fresh chat (or a machine with no voices) starts on No voice.

Attachments

• Add files by dragging them anywhere onto the page, or by pasting them directly into the text box.
• Images (any image type) are attached as thumbnails and sent as the exact original data — no resizing, no recompression.
• Text/code files (txt, md, json, csv, logs, source code, config formats and more) are sent byte-for-byte with no newline conversion or trimming, so the model receives the file verbatim.
• Anything else is skipped with an alert explaining the supported types.
• Before sending, pending attachments appear as chips above the composer with their sizes; the × on a chip removes it.
• Sent attachments show inside the message: images inline, files as filename + size chips. The file text is never rendered into the chat.

Emoji picker

• Type : at the start of a word (after whitespace or at the very beginning of the line) and a popup opens above the composer.
• Keep typing to search by name or keyword, live.
• ↑/↓ or Tab move through results, Enter picks (which does NOT send the message), Esc closes, a space closes, and clicking outside closes.
• The picked emoji replaces the whole :query text at the cursor.
• Completed pairs like :thumbsup: are also converted automatically on their own — Discord-style names work without ever opening the popup.
• Empty query shows the first 60 emoji; up to 60 matches shown, no match says so.

Markdown and code blocks

Model replies support exactly three things: bold (**text**), fenced code blocks (```lang ... ```, with ~ fences also working and unterminated fences rendering during streaming), and plain text with preserved line breaks. Nothing else is interpreted, and all output is rendered through safe DOM APIs — model text can never inject HTML.

Code block features

• Language label — the fence language, uppercased, in the header.
• Clicking the header (the label area, not the buttons) scrolls the chat so the code block's parent MESSAGE sits at the top of the view — so you can see the start of the reply the code came from.
• ▶ Preview — only on HTML blocks. Opens a sandboxed iframe showing the exact code captured when the block was built (scripts allowed, no same-origin access). Click again to hide it.
• Copy — copies the code to the clipboard, with an execCommand fallback. Shows "Copied!" for a moment.
• Save — downloads the code as a file, extension mapped from the language (js, py, sh, html and dozens more, with sensible fallbacks). For HTML snippets the filename is taken from the code's <title> if it has one (e.g. "Lumo Chat.html"), otherwise snippet.html.

Streaming

• Responses stream over SSE. A blinking caret shows until the first token arrives.
• The ■ Stop button (or deleting/rewinding the streaming message) cancels the stream; partial output is kept and re-rendered cleanly.
• Rendering during streaming is batched to animation frames so it never stutters, and partial code fences never spill into prose.
• Tool events — when the model calls a tool (image generation, web search, knowledge search, etc.) a status line shows what's running. Images returned by generate_image / edit_image are rendered inline in the reply and kept in history.

Smart scrolling

• The chat follows new output only while you are voluntarily at (or within 100px of) the bottom.
• Any upward intent — mouse wheel up, scrollbar drag, touch swipe up, ArrowUp / PageUp / Home — pauses following so you can read.
• Scrolling back down to the bottom (or ArrowDown / PageDown / End at the bottom) resumes following.
• Sending a message always jumps to the bottom; restored conversations open at the bottom.

Settings

• Custom system prompt — free-text prompt prepended to every request. Saved instantly to localStorage as you type. When empty it is not sent at all.
• Prompt files — attach text/code files that are sent as part of the system prompt with EVERY message. They appear as chips (filename, size, upload time) both here and in the system message bubble. Files are newline-normalised for a clean prompt (unlike message attachments, which stay verbatim). Added or removed only here in Settings. Stored in IndexedDB.
• The system message bubble is hidden entirely when there is no prompt and no files.
• Opening Settings closes the emoji popup. "Done" or the ⚙ button hides it.

Keyboard shortcuts

• Enter — send (or apply a message edit, or pick an emoji if the popup is open — in that order of priority).
• Shift+Enter — newline, in the box and while editing a message.
• ↑/↓/Tab/Enter/Esc — navigate/pick/close the emoji popup.
• ArrowUp/PageUp/Home — pause chat auto-follow.
• ArrowDown/PageDown/End — resume auto-follow at the bottom.

Persistence

• Chat history, custom prompt, chosen model and prompt files are saved automatically (debounced) whenever anything changes.
• The chosen voice for output is saved to localStorage and restored on load; no saved choice means No voice. The microphone mode is NOT saved — the mic always starts Off when the page opens.
• History is stored as raw source data (role + raw markdown + attachments) in IndexedDB (lumoChatDB) — never as rendered HTML, so UI labels can never leak back into the API context after a reload.
• Everything is restored on load: messages, attachments, images, error bubbles. An older localStorage-based history format is migrated automatically.

Security and privacy

• No chat data is stored anywhere except your own browser (IndexedDB + localStorage). Clearing chat via the title removes messages from the page; clearing site data removes the saved history.
• Model output is never parsed as HTML. All message rendering goes through safe DOM APIs (createElement / textContent), so text from the model can never execute as code.
• Authentication is supplied by you: set authCookie and/or authAuthorization at the top of the script. If neither is set the requests rely on you already having session cookies in the same browser context.

Technical notes

• Single HTML file, zero dependencies, all vanilla JavaScript.
• API endpoint is the Proton Lumo completions route with streaming enabled; the stop/rewind logic cancels the underlying fetch reader so no late tokens arrive.
• Token estimation is approximate: characters ÷ 4, plus 750 tokens per image. It is a planning aid, not an exact count.
• The context meter reuses the exact buildContext() output that gets sent, so the estimate always matches what the model actually receives.
• Voice input uses the Web Speech API and is intentionally limited to Chrome where that API is reliable. Dictation is append-only: recognised words are inserted immediately and never revised. Auto send waits for text-to-speech output to finish before firing. Voice output uses the standard Speech Synthesis API and works in any browser that ships voices; speech is skipped entirely if the message is removed before or during playback.
• Sketches are drawn on a canvas and exported as PNG data URLs — the exact rendered image is what gets sent, no recompression.
• Old localStorage-format chat histories are detected and migrated to the current raw-markdown IndexedDB format on first load.