- Convert relative CSS URLs to absolute URLs using current origin
- Ensure translated pages can load original blog CSS in new window
- Maintain modal functionality with external CSS files
- Skip URLs that are already absolute (http/https or protocol-relative)
- Add logging to see how many CSS links are found
- Log each CSS file being inlined and success/failure
- Help diagnose why translated pages may not have modal styling
- Fetch external uncloseai CSS files and inline them as <style> tags
- Replace body content with translated version while preserving page structure
- Ensure new window is self-contained and doesn't need external CSS requests
- Maintain new window approach to avoid breaking current page
The CSS refactoring broke translated page rendering. The original function
was working correctly by translating the complete HTML document structure.
Translated pages don't need modal CSS, just the original page styling.
- Update translateCurrentPage() to preserve original page HTML structure
- Extract only text content for translation while keeping head/styles
- Create properly formatted translated page with clean typography
- Fix issue where translated pages opened in new windows lacked CSS styling
- Change CSS loading logic to detect actual PicoCSS link tags on page
- Blog sites without PicoCSS now correctly load uncloseai-modal-builtin.css
- PicoCSS sites load uncloseai-modal-pico.css with proper overrides
- Fix modal appearing full-screen on blog sites that don't use PicoCSS
- Remove all inline CSS from translate-modal.js, tts-modal.js, and widget-library.js
- Replace inline styles with CSS classes in both builtin and pico CSS files
- Eliminate USE_CUSTOM_STYLING conditionals from styling code
- Add proper CSS classes: translate-modal-*, tts-modal-*, widget-*
- Maintain all functionality while achieving clean separation of concerns
- Fix modal sizing issues on large displays through proper PicoCSS overrides
- Support responsive design with mobile-first approach (≤480px full screen)
- Pass all tests: formatting, exports, translations, and integration
- Create uncloseai-modal-builtin.css for blog versions
- Create uncloseai-modal-pico.css for PicoCSS override
- Add conditional CSS loading to all modal JavaScript files
- Remove inline styles from main modal, translate modal, TTS modal, and widget library
- Fix modal full-screen issue on large displays with proper PicoCSS overrides
- Maintain mobile-first responsive design (≤480px full screen)
- Support both USE_CUSTOM_STYLING modes for maximum compatibility
Changed mobile detection threshold from 768px to 480px to ensure
centered modal behavior on desktop/laptop screens while preserving
full-screen experience on actual mobile devices.
- Changed Node.js Examples from h2 to h3 to be subsection under Using the Hermes AI Model
- Updated table of contents to group all Python and Node.js examples under main Hermes section
- Improved logical document structure with consistent hierarchy
- All AI model examples now properly organized under single main section
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added distinct bullet styles (disc for main, circle for sub-items)
- Implemented proper indentation with padding and margins
- Added subtle left border for nested sections using theme color
- Differentiated font sizes between main sections and subsections
- Improved line height and spacing for better readability
- Maintains PicoCSS compatibility while clearly showing hierarchy
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added comprehensive hierarchical table of contents with proper h2/h3 nesting
- Added missing section IDs to all headers for proper anchor navigation
- Restructured headers to use only h2 (main sections) and h3 (subsections)
- Organized content with logical grouping: Web Client, OpenAI Client, Hermes Model, Node.js, TTS
- Enhanced navigation with complete coverage of all sections and subsections
- Improved document structure and accessibility with semantic HTML
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed from <section> to <aside> for proper semantic navigation
- Removed custom CSS overrides that conflicted with PicoCSS
- Simplified structure from nested ordered/unordered lists to flat unordered list
- Removed inline styling to let PicoCSS handle navigation appearance
- Improved accessibility and framework compatibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added navigational table of contents with hierarchical structure
- Added missing section IDs for proper anchor linking
- Organized content into logical sections with subsections
- Included prominent link to demo page for interactive examples
- Improved page navigation and user experience
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add 'open' attribute to all <details> sections
- Ensure code examples are immediately visible to users
- No need to click to expand - documentation should be accessible
- Add TTS modal button example with openTTSModal() function
- Add translation modal button example with openTranslateModal() function
- Add standalone read page button example with readPageWithHermes() function
- Reorganize all sections to show live examples first, then code examples
- Improve documentation flow: demo first, then implementation details
- Add detailed feature lists and best-use-case descriptions
- Provide multiple implementation options for each feature (widget vs modal vs API)
- Update table of contents to reflect new organization
- Make it easy for people to add widgets to any webpage with clear examples
- Restore translate modal demo - it works fine on main app
- Add manual imports for openTranslateModal, openTTSModal, readPageWithHermes
- Ensure all widget functions are available globally for demo widgets
- Fix module loading issues that were causing "is not a function" errors
- Make translation modal work as isolated tool in demo
- Comment out entire smart dropdown section - no point advertising broken features
- Simplify translation section to only show working translation modal
- Update section title from "Translation Options" to "Translation Modal"
- Change "Live Examples" to "Live Example" (singular)
- Clean up code examples to only show working translate feature
- Remove confusing "two ways to translate" messaging
- Remove file upload references from system message
- Comment out smart-translate feature examples (not working yet)
- Disable smart translate demo with "Under Development" styling
- Keep traditional translate modal working
- Style disabled features with greyed-out appearance
- Fix demo page to only show working functionality
- Restore handleFileUpload import in widget-library.js to fix ReferenceError
- Keep all upload functionality code intact for future development
- Disable upload features in demo.html with "Under Development" messaging
- Remove upload from feature button examples but preserve the code
- Style disabled upload demo with greyed-out appearance
- Fix demo page functionality while maintaining upload code for future fixes
- Expand README language section with complete list of 19 supported languages
- Add native language names and language codes for each supported language
- Detail language features: manual selection, complete coverage, AI responses
- List comprehensive translation coverage areas (modals, buttons, messages, etc.)
- Update project structure to show language files with descriptions
- Remove auto-detection claims since feature is not working properly
- Change to accurate "manual selection" and "AI-powered translation"
- Fix demo.html to remove false auto-detection advertising
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix demo.html language count from 18 to 19 (verified by counting files)
- Remove "omni-directional" translation claims and use standard "Translation"
- Fix custom TTS example to use speakTextDirect instead of speakText (no Hermes preprocessing)
- Fix all demo functions to properly import modules dynamically
- Add missing imports for sendMessage, uploadFile, speakTextDirect, translateText
- Fix broken custom chat, TTS, file upload, page analysis, and translation examples
- Update README.rst and index.html language counts to accurate 19 languages
- Fix typo "transation" to "translation" in index.html
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Detect when model streaming is complete in all streaming locations
- Add syntax highlighting (hljs) to code blocks after streaming finishes
- Add copy buttons to code blocks after highlighting is applied
- Prevent duplicate copy buttons with CSS class detection
- Optimize performance by doing syntax highlighting and copy buttons only once per message
- Apply improvements to both modal streaming and standalone chat
- Add copy buttons to intro message generation as well
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created extensive README.rst with full project documentation
- Added brief documentation sections to index.html and demo.html
- Emphasized public domain licensing and open web philosophy
- Fixed branding to use lowercase uncloseai. and unturf.
- Points users to git repository for complete technical details
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add enforceModalTextColors() function with high CSS specificity
- Use !important declarations to override blog CSS
- Force dark text (#212529) on inputs, buttons, and general content
- Keep white text on user messages for proper contrast
- Add user-message class to user messages for targeted styling
- Prevents unreadable white text on white backgrounds on blog
