modified: journal.rst

journal.rst

@@ -220,4 +220,143 @@ dialog#uncloseai-embedded-modal[data-theme] {
 ✅ **Cross-Site Compatibility**: Consistent behavior across all site types
 ✅ **Maintainability**: Single source of truth for modal styling
 
-This comprehensive refactoring established a robust CSS architecture that handles all edge cases while providing an optimal user experience across all devices and contexts.
+This comprehensive refactoring established a robust CSS architecture that handles all edge cases while providing an optimal user experience across all devices and contexts.
+
+July 11, 2025
+=============
+
+Custom API Integration & UI Overhaul
+-------------------------------------
+
+**Major Features Implemented:**
+
+Custom API Endpoint Support
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Implemented comprehensive custom OpenAI-compatible API support allowing users to integrate their own AI providers (Groq, OpenAI, Claude, etc.) into the chat system:
+
+- **Centralized Configuration System**: Created ``getAPIConfig()`` in ``config.js`` to manage API settings
+- **Universal API Call Patching**: All chat functions now check for custom configuration automatically
+- **Dynamic Model Discovery**: System fetches available models from custom endpoints via ``/v1/models``
+- **Intelligent Max Tokens**: Automatically detects context limits from model metadata:
+  - VLLM: ``max_model_len`` (e.g., 82,000 tokens)
+  - OpenAI: ``max_tokens`` (e.g., 8,192 tokens)  
+  - Groq: ``context_length`` (e.g., 128,000 tokens)
+- **Seamless Fallback**: Falls back to default Hermes endpoints when custom API unavailable
+
+**Settings Panel Complete Redesign**
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Restructured the settings interface for better organization and usability:
+
+- **Two-Column Grid Layout**: Left column (Model, Voice, Language), Right column (API Configuration)
+- **Quick Actions Header**: Action buttons span both columns at the top for prominence
+- **Mobile Responsive**: Automatically stacks to single column on screens ≤768px
+- **Label Cleanup**: Removed redundant section headers (``AI Model:``, ``TTS Voice:``, etc.) for cleaner look
+- **Grid Override Fixes**: Added ``!important`` declarations to overcome PicoCSS conflicts
+
+**Translation System Improvements**
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Enhanced the multilingual system with new keys and cleanup:
+
+- **Chat Audio Downloads**: Added ``downloadChatAudio`` key for chat message audio
+- **Custom API Description**: Added ``useCustomAPI`` across all 19 languages: "Use a custom openai compatible endpoint."
+- **Translation Cleanup**: Removed 5 unused keys (``modelLabel``, ``voiceLabel``, ``languageLabel``, ``quickActions``, ``apiConfigLabel``)
+- **Validator Updates**: Enhanced verification scripts to handle translation changes
+
+**Critical Bug Fixes:**
+
+Model Selection System Overhaul
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Fixed fundamental issues with model selection that were causing API mismatches:
+
+**Issue**: Users selected Groq models but system sent requests to Hermes models
+**Root Cause**: Modal model dropdown had no HTML ID, causing ``getSelectedModel()`` to fall back to defaults
+
+**Solution**: 
+- Added ``id="hermes-model-selection"`` to modal dropdown
+- Enhanced debug logging to trace model selection flow
+- Fixed model registry to properly store endpoint relationships
+
+**Cache System Enhancement**
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Fixed refresh models button not working when custom API settings changed:
+
+**Issue**: Clicking refresh didn't fetch new models after enabling custom API
+**Root Cause**: Cache key only considered ``VLLM_ENDPOINTS`` array, not custom API configuration
+
+**Solution**:
+- Include custom API settings in cache hash key
+- Cache now properly invalidates when toggling custom API
+- Test case: Checking/unchecking custom API produces different model lists
+
+**Error Handling & Debugging**
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Added comprehensive error tracking and debugging tools:
+
+- **API Error Details**: Full HTTP status codes and response bodies logged
+- **Model Selection Tracing**: Debug messages show exactly which model is selected and why
+- **Configuration Verification**: Clear console indicators for custom vs default API usage
+- **Max Tokens Logging**: Shows token limits being used for each request type
+
+**Technical Implementation Details:**
+
+**Files Modified:**
+- ``src/config.js`` - Central API configuration with ``getAPIConfig()``
+- ``src/models.js`` - Enhanced model selection, caching, and max_tokens support  
+- ``src/chat.js`` - Dynamic max_tokens for all chat functions
+- ``src/translation.js`` - Custom API support with dynamic token limits
+- ``src/ui.js`` - Intro generation API integration
+- ``src/uncloseai-embed-modal.js`` - Settings UI redesign and model dropdown ID fix
+- ``src/uncloseai-modal-*.css`` - Grid layouts and responsive design improvements
+- ``src/languages/*.js`` - Translation updates across all 19 language files
+
+**API Call Patching Strategy:**
+All API functions now follow this pattern:
+```javascript
+const apiConfig = await getAPIConfig();
+if (apiConfig.isCustom) {
+    // Use custom endpoint, API key, and selected model
+    apiUrl = `${apiConfig.endpoint}/chat/completions`;
+    headers = { "Authorization": `Bearer ${apiConfig.apiKey}` };
+    model = apiConfig.model;
+} else {
+    // Use default Hermes configuration
+    apiUrl = `${getSelectedModelEndpoint()}/chat/completions`;
+    headers = { "Authorization": `Bearer ${API_KEY}` };
+    model = getSelectedModel();
+}
+```
+
+**Dynamic Max Tokens Implementation:**
+```javascript
+const maxTokens = getSelectedModelMaxTokens(); // Reads from model registry
+// Translation: Could be 70,000 for VLLM or 8,192 for Groq
+// Chat: Adapts to whatever the selected model supports
+```
+
+**UI Flow Improvements:**
+1. User configures custom API (base URL + API key)
+2. Clicks "🔄 Refresh Models" → Fetches models from both Hermes + custom endpoint
+3. Selects model from combined dropdown (e.g., ``https://api.groq.com/openai/v1-llama-3.1-8b-instant``)
+4. All features (chat, translation) automatically use selected custom model
+
+**Deployment Notes:**
+- **Backward Compatible**: Existing users continue using Hermes by default
+- **Progressive Enhancement**: Custom API is opt-in with fallback protection
+- **Cache Management**: Model cache automatically refreshes when configuration changes
+- **Cross-Platform**: Works on both modal interface and blog site integration
+
+**Testing Completed:**
+- ✅ Custom API integration with Groq, OpenAI endpoints
+- ✅ Model selection working across modal and blog interfaces
+- ✅ Dynamic max_tokens based on model capabilities (82k for VLLM, 8k for Groq)
+- ✅ Cache invalidation when toggling custom API settings
+- ✅ Mobile responsive 2-column grid layout
+- ✅ Translation key cleanup across all 19 languages
+
+This release transforms the AI chat system from a single-provider solution into a flexible, multi-provider platform while maintaining the clean user experience and adding significant debugging capabilities for troubleshooting.