[MAICE Dev Log 3] SvelteKit chatbot interface for real-time math rendering

1. UX challenge in math chat

Text chat is easy. Math chat is not.

Typing plain expressions is manageable, but full symbolic notation quickly becomes a barrier in real classrooms.

During beta tests, students repeatedly reported that raw LaTeX input was too hard. So we focused on two goals:

easier equation input
stable real-time rendering of generated formulas

2. Why SvelteKit

We selected SvelteKit for responsive interaction and rendering performance with heavy math UI components.

The non-virtual-DOM model helped keep formula interactions smoother under frequent updates.

3. MathLive for inline formula input

We built a custom input component around MathLive so users can switch naturally between text and formula input.

<math-field
  virtual-keyboard-mode="manual"
  on:focus={handleFocus}
  on:input={handleInput}
>
  {value}
</math-field>

Mobile virtual keyboard behavior was tuned for math symbols.

OCR added from beta feedback

We integrated Gemini Vision OCR so students can upload worksheet photos and prefill formula text instead of typing everything manually.

4. Streaming markdown + LaTeX safely

SSE token streams can arrive with incomplete LaTeX fragments.

To avoid broken rendering, we added a buffering/preprocessing layer that delays or sanitizes partial formula blocks before KaTeX render attempts.

This made the output feel like live writing while reducing render-break artifacts.

5. Theme system and readability

Late-night study sessions are common, so readability mattered more than visual novelty.

We applied a consistent dark-mode palette with formula contrast tuning to reduce eye strain.

6. Educational UX principles

Minimize non-learning friction (input burden)
Keep feedback immediate and readable
Preserve learning flow over interface complexity

Beta vs main experiment comparisons should be interpreted as trend-level references, since setup and conditions were not strictly identical controlled conditions.

7. Closing

Our frontend principle was simple:

Let technology stay in the background so students can focus on thinking.

[MAICE Dev Log 4] QAC checklist development