mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-09 06:57:07 +02:00
eca21d3191
* feat: add custom media renderer support to RichText Add renderMedia prop to RichText component that allows overriding how images, videos, and audio are rendered across the entire RichText subtree (including Link and Gallery components). The custom renderer receives: - url: the media URL - type: "image" | "video" | "audio" - imeta: optional NIP-92 metadata (dimensions, blurhash, alt, etc.) This enables chat-specific media rendering with compact thumbnails, lightboxes, or any custom presentation. https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: add ChatMediaRenderer for compact inline media display Custom media renderer for chat that shows: - Media type icon (image/video/audio) - Filename (extracted from URL or imeta alt) - File size (from imeta if available) - Blossom link button (opens blob viewer for blossom URLs) Usage: <RichText event={message} renderMedia={ChatMediaRenderer} /> https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: use ChatMediaRenderer in chat messages - Updated ChatMediaRenderer to use getHashFromURL from blossom-client-sdk - Integrated ChatMediaRenderer into ChatViewer for message content https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * style: make ChatMediaRenderer inline with subtle dotted border Use a subtle dotted bottom border instead of background/padding to better integrate with surrounding text flow. https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: improve ChatMediaRenderer UX - Full dotted border with rounded corners (was bottom-only) - Increased gap between elements - Images/videos open in MediaDialog zoom viewer on click - Audio still opens in new tab - Better extension extraction for display https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: improve blossom integration in ChatMediaRenderer - Use HardDrive icon instead of Flower2 (consistent with rest of app) - Add commandString for Edit functionality in window toolbar - Pass blobUrl with extension to BlossomViewer for correct media preview - Extended BlossomViewer.BlobDetailView to accept blobUrl prop https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * refactor: simplify ChatMediaRenderer styling - All icons now size-3 - Use dotted underline only (cleaner inline appearance) - All media types open in new tab on click - Removed MediaDialog dependency https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * fix: inherit custom media renderer in nested RichText components Previously, nested RichText components (like those in QuotedEvent/KindRenderer) would always reset the media renderer context to null because the provider used `renderMedia ?? null`. This caused embedded events in chat to use the default media renderer instead of ChatMediaRenderer. Now RichText inherits the parent media renderer when no explicit renderMedia prop is passed, allowing custom renderers to work throughout the entire rich text subtree including quoted events. https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: improve ChatMediaRenderer with expandable inline media - More compact representation: "icon truncated-hash blossom" - Click filename to expand and show actual media inline (image/video/audio) - Tooltip shows full filename and file size on hover - Audio support with inline audio player when expanded - Fixed BlossomViewer to detect media type from URL extension when mimeType is not available from blob descriptor https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: improve ChatMediaRenderer with better UX - Click to expand shows MediaEmbed (not collapsible once expanded) - Tooltip only shows when imeta is present, displays: alt, mime type, dimensions, size, duration - More compact representation: [icon] truncated-hash [blossom] - Pass mediaType to BlossomViewer for correct preview rendering - BlossomViewer now accepts mediaType hint for preview type detection https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * fix: blossom blob command now parses --type flag - Added mediaType and blobUrl fields to BlossomCommandResult - Blob subcommand now parses --type image|video|audio flag - Fixed server URL overflow in blob detail view with truncation https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * refactor: add global loadMedia setting with CompactMediaRenderer - Add `loadMedia` setting to Appearance section (enabled by default) - Create CompactMediaRenderer in src/components/nostr/ (renamed from ChatMediaRenderer) - Link.tsx and Gallery.tsx now check the setting and use CompactMediaRenderer when disabled - Tooltip format improved: "Field <value>" with field name and value side by side - Shows: Hash, Size, Dimensions, Type, Duration, Alt - Remove renderMedia prop from ChatViewer (now automatic based on setting) - Delete old ChatMediaRenderer.tsx This makes media rendering a site-wide setting rather than chat-specific. https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD --------- Co-authored-by: Claude <noreply@anthropic.com>
Grimoire
A Nostr protocol explorer and developer tool with a tiling window manager interface.
Features
- Tiling Windows - Each window is a Nostr "app" (profile viewer, event feed, NIP docs, etc.)
- Command Palette - Unix-style commands via
Cmd+Kto open apps and navigate - Multi-workspace - Virtual desktops with independent layouts
- Real-time - Reactive event subscriptions with automatic updates
Stack
React 19, TypeScript, Vite, TailwindCSS, Jotai, Dexie, Applesauce
Getting Started
npm install
npm run dev
Scripts
| Command | Description |
|---|---|
npm run dev |
Start dev server |
npm run build |
Build for production |
npm test |
Run tests in watch mode |
npm run lint |
Lint code |
npm run format |
Format code |
License
MIT