Archive Steam docs; add itch.io upload guide

Move legacy Steam-related docs into documentation/archived and add a new UPLOAD-ITCH.md describing how to publish builds to itch.io with Butler. Update top-level README to state official releases will be on itch.io. Remove Steam-specific UI/features: drop steamCloudOptIn from first-run preferences, remove the Steam Cloud teaser and summary from the setup flow, and adjust settings/setup copy to reference handheld devices and non‑Steam distribution. Also make a small wording tweak in the plugins doc about rendererPreload.
2026-02-24 20:50:00 +13:00
parent 618ea7d12d
commit 0b51d133a4
13 changed files with 136 additions and 22 deletions
@@ -0,0 +1,133 @@
+# Nebot Typing Animation Feature
+
+## Overview
+Added a realistic typing animation to the Nebot chat interface that makes AI responses appear character by character, similar to ChatGPT and other modern AI chat interfaces.
+
+## Features Added
+
+### 1. **Typing Animation**
+- Characters appear one by one instead of instantly
+- Smooth, natural typing rhythm
+- Configurable typing speed
+- Blinking cursor indicator during typing
+
+### 2. **Settings Integration**
+- **Enable/Disable Toggle**: Users can turn typing animation on/off
+- **Speed Control**: Adjustable from 10-200 characters per second
+- **Live Preview**: Speed indicator updates in real-time
+- **Persistent Settings**: Preferences are saved and restored
+
+### 3. **Smart Behavior**
+- **Queue Management**: Handles fast token streams efficiently
+- **Graceful Fallback**: Falls back to instant display if disabled
+- **Markdown Rendering**: Waits for typing to complete before rendering markdown
+- **Auto-scroll**: Maintains scroll position during animation
+
+## Technical Implementation
+
+### Code Changes Made:
+
+#### 1. **page.js** - Main Logic
+```javascript
+// Typing animation state
+let typingQueue = [];
+let isTyping = false;
+let typingSpeed = 25; // milliseconds per character
+let typingEnabled = true; // can be toggled in settings
+
+function startTypingAnimation(element) {
+  if (isTyping || typingQueue.length === 0) return;
+  
+  isTyping = true;
+  element.classList.add('typing');
+  
+  function typeNext() {
+    if (typingQueue.length === 0) {
+      isTyping = false;
+      element.classList.remove('typing');
+      return;
+    }
+    
+    const char = typingQueue.shift();
+    element.textContent += char;
+    els.messages.scrollTop = els.messages.scrollHeight;
+    
+    setTimeout(typeNext, typingSpeed);
+  }
+  
+  typeNext();
+}
+```
+
+#### 2. **page.css** - Visual Effects
+```css
+/* Typing animation cursor */
+.markdown.typing:after {
+  content: "▋";
+  color: var(--accent);
+  animation: blink 1s infinite;
+  margin-left: 1px;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+```
+
+#### 3. **Settings UI** - User Controls
+- Checkbox to enable/disable typing animation
+- Range slider for speed control (10-200 chars/sec)
+- Real-time speed display
+- Proper styling for form elements
+
+## User Experience
+
+### Before:
+- Text appeared instantly when AI responded
+- No visual feedback during response generation
+- Less engaging interaction
+
+### After:
+- Smooth character-by-character reveal
+- Blinking cursor shows active typing
+- Configurable speed for user preference
+- More engaging, human-like interaction
+
+## Usage Instructions
+
+1. **Open Nebot**: Navigate to the Nebot page in Nebula Browser
+2. **Start a Chat**: Send a message to begin conversation
+3. **Watch the Animation**: AI responses will type out naturally
+4. **Customize Settings**: 
+   - Click the ⚙ Settings button
+   - Toggle "Enable typing animation"
+   - Adjust typing speed with the slider
+   - Save changes
+
+## Performance Considerations
+
+- **Efficient Queuing**: Uses character queue to handle fast token streams
+- **Memory Friendly**: Minimal memory overhead
+- **Responsive**: Maintains smooth UI during animation
+- **Interruptible**: Can be disabled without restart
+
+## Future Enhancements
+
+Potential improvements could include:
+- Variable speed based on punctuation (pause at periods)
+- Sound effects for typing
+- Different animation styles
+- Per-conversation speed settings
+- Typing speed based on message length
+
+## Testing
+
+To test the feature:
+1. Start Nebula Browser (`npm start`)
+2. Navigate to Nebot page
+3. Send a message and observe the typing animation
+4. Try different speed settings in the settings panel
+5. Toggle the feature on/off to compare experiences
+
+The typing animation enhances the user experience by making AI interactions feel more natural and engaging, similar to popular chat interfaces like ChatGPT.