From b17542e0f10c0c1dddf108b2964224578c76c74c Mon Sep 17 00:00:00 2001 From: MarekWo Date: Wed, 31 Dec 2025 17:48:04 +0100 Subject: [PATCH] docs: Update documentation for message content enhancements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated README.md with new features: - Added mention badges, clickable URLs, and image previews to Key Features - Added new "Message Content Features" section with detailed usage - Updated Project Structure to include message-utils.js - Marked feature as completed in Development Status Updated CLAUDE.md with technical details: - Added message-utils.js to Project Structure - Added new "Message Content Processing" section with: - Features overview (mentions, URLs, images) - Technical implementation details - CSS classes and functions - Usage examples - Security notes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- README.md | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index faab8cb..ac83a22 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,9 @@ A lightweight web interface for meshcore-cli, providing browser-based access to - 🔐 **Channel sharing** - Share channels via QR code or encrypted keys - 🔓 **Public channels** - Join public channels (starting with #) without encryption keys - 🎯 **Reply to users** - Quick reply with `@[UserName]` format +- 🏷️ **Mention badges** - User mentions displayed as styled badges (like Android Meshcore app) +- 🔗 **Clickable URLs** - Automatic URL detection and link conversion +- 🖼️ **Image previews** - Inline image thumbnails with click-to-expand modal - 👥 **Contact management** - Manual contact approval mode with pending contacts list (persistent settings) - **Dedicated pages:** Separate full-screen views for pending and existing contacts - **Advanced sorting:** Sort contacts by name (A-Z/Z-A) or last advertisement time (newest/oldest) @@ -187,7 +190,8 @@ mc-webui/ │ │ └── js/ │ │ ├── app.js # Main page frontend logic │ │ ├── dm.js # Direct Messages page logic -│ │ └── contacts.js # Contact Management multi-page logic +│ │ ├── contacts.js # Contact Management multi-page logic +│ │ └── message-utils.js # Message content processing (mentions, URLs, images) │ └── templates/ │ ├── base.html # Base template │ ├── index.html # Main chat view @@ -221,6 +225,7 @@ mc-webui/ - [x] Smart Notifications (Unread counters per channel and total) - [x] Direct Messages (DM) - Private messaging with delivery status tracking - [x] Advanced Contact Management - Multi-page interface with sorting, filtering, and activity tracking +- [x] Message Content Enhancements - Mention badges, clickable URLs, and image previews ### Next Steps @@ -305,6 +310,31 @@ Archives are created automatically at midnight (00:00 UTC) each day. The live vi Click the reply button on any message to insert `@[UserName]` into the text field, then type your reply. +### Message Content Features + +The application automatically enhances message content with interactive elements: + +#### Mention Badges +User mentions in the format `@[Username]` are displayed as styled blue badges (similar to the Android Meshcore app), making it easier to identify who is being addressed in a conversation. + +**Example:** `@[MarWoj] test w Kielcach` displays with "MarWoj" as a blue badge. + +#### Clickable URLs +URLs starting with `http://` or `https://` are automatically converted to clickable links that open in a new browser tab. + +**Example:** `https://example.com` becomes a clickable blue link. + +#### Image Previews +URLs ending in `.jpg`, `.jpeg`, `.png`, `.gif`, or `.webp` are displayed as: +- **Inline thumbnails** (max 300x200px on desktop, 200x150px on mobile) +- **Click-to-expand** - Click any thumbnail to view the full-size image in a modal preview +- **Lazy loading** - Images load only when needed for better performance +- **Error handling** - Broken images show a placeholder + +**Example:** Sending `https://example.com/photo.jpg` shows a thumbnail of the image that can be clicked to view full-size. + +**Note:** All content enhancements work in both channel messages and Direct Messages (DM). + ### Direct Messages (DM) Access the Direct Messages feature: