feat: add support for rendering images in chat messages (#29)

Reviewed-on: #29
Co-authored-by: Ren Amamiya <reya@lume.nu>
Co-committed-by: Ren Amamiya <reya@lume.nu>

crates/chat/src/message.rs

@@ -1,8 +1,8 @@
 use std::hash::Hash;
 use std::ops::Range;
 
-use common::{EventExt, NostrParser};
-use gpui::SharedString;
+use common::{EventExt, NostrParser, extract_and_remove_media_urls};
+use gpui::{SharedString, SharedUri};
 use nostr_sdk::prelude::*;
 
 /// New message.
@@ -132,6 +132,8 @@ pub struct RenderedMessage {
     pub author: PublicKey,
     /// The content/text of the message
     pub content: String,
+    /// List of media URLs in the message
+    pub media: Vec<SharedUri>,
     /// Message created time as unix timestamp
     pub created_at: Timestamp,
     /// List of mentioned public keys in the message
@@ -144,11 +146,13 @@ impl From<&Event> for RenderedMessage {
     fn from(val: &Event) -> Self {
         let mentions = extract_mentions(&val.content);
         let replies_to = extract_reply_ids(&val.tags);
+        let (media, string) = extract_and_remove_media_urls(&val.content);
 
         Self {
             id: val.id,
             author: val.pubkey,
-            content: val.content.clone(),
+            content: string,
+            media,
             created_at: val.created_at,
             mentions,
             replies_to,
@@ -160,12 +164,14 @@ impl From<&UnsignedEvent> for RenderedMessage {
     fn from(val: &UnsignedEvent) -> Self {
         let mentions = extract_mentions(&val.content);
         let replies_to = extract_reply_ids(&val.tags);
+        let (media, string) = extract_and_remove_media_urls(&val.content);
 
         Self {
             // Event ID must be known
             id: val.id.unwrap(),
             author: val.pubkey,
-            content: val.content.clone(),
+            content: string,
+            media,
             created_at: val.created_at,
             mentions,
             replies_to,
@@ -177,12 +183,14 @@ impl From<&NewMessage> for RenderedMessage {
     fn from(val: &NewMessage) -> Self {
         let mentions = extract_mentions(&val.rumor.content);
         let replies_to = extract_reply_ids(&val.rumor.tags);
+        let (media, string) = extract_and_remove_media_urls(&val.rumor.content);
 
         Self {
             // Event ID must be known
             id: val.rumor.id.unwrap(),
             author: val.rumor.pubkey,
-            content: val.rumor.content.clone(),
+            content: string,
+            media,
             created_at: val.rumor.created_at,
             mentions,
             replies_to,

crates/chat_ui/src/lib.rs

@@ -4,14 +4,14 @@ use std::sync::Arc;
 pub use actions::*;
 use anyhow::{Context as AnyhowContext, Error};
 use chat::{ChatRegistry, Message, RenderedMessage, Room, RoomEvent, SendReport, SendStatus};
-use common::TimestampExt;
+use common::{TimestampExt, coop_cache};
 use gpui::prelude::FluentBuilder;
 use gpui::{
     AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter, FocusHandle,
     Focusable, InteractiveElement, IntoElement, ListAlignment, ListOffset, ListState, MouseButton,
-    ObjectFit, ParentElement, PathPromptOptions, Render, SharedString, StatefulInteractiveElement,
-    Styled, StyledImage, Subscription, Task, WeakEntity, Window, deferred, div, img, list, px, red,
-    relative, svg, white,
+    ObjectFit, ParentElement, PathPromptOptions, Render, SharedString, SharedUri,
+    StatefulInteractiveElement, Styled, StyledImage, Subscription, Task, WeakEntity, Window,
+    deferred, div, img, list, px, red, relative, svg, white,
 };
 use itertools::Itertools;
 use nostr_sdk::prelude::*;
@@ -914,7 +914,8 @@ impl ChatPanel {
                             .when(has_replies, |this| {
                                 this.children(self.render_message_replies(replies, cx))
                             })
-                            .child(rendered_text),
+                            .child(rendered_text)
+                            .child(self.render_media(&message.media, cx)),
                     ),
             )
             .child(
@@ -941,6 +942,55 @@ impl ChatPanel {
             .into_any_element()
     }
 
+    fn render_media(&self, media: &[SharedUri], cx: &Context<Self>) -> impl IntoElement {
+        // No media: return empty div
+        if media.is_empty() {
+            return div();
+        };
+
+        // Single media item: render full-width image
+        if media.len() == 1 {
+            return div().child(
+                img(media[0].clone())
+                    .border_1()
+                    .border_color(cx.theme().border_variant)
+                    .h(px(250.))
+                    .object_fit(ObjectFit::Cover)
+                    .rounded(cx.theme().radius),
+            );
+        }
+
+        // Multiple media items: render in a row
+        div()
+            .w_full()
+            .flex_1()
+            .flex()
+            .flex_row()
+            .flex_wrap()
+            .gap_2()
+            .children({
+                let mut items = vec![];
+
+                for (ix, item) in media.iter().enumerate() {
+                    items.push(
+                        div()
+                            .id(format!("media-{ix}"))
+                            .flex_grow_0()
+                            .flex_shrink_0()
+                            .child(
+                                img(item.clone())
+                                    .h_32()
+                                    .border_1()
+                                    .border_color(cx.theme().border_variant)
+                                    .rounded(cx.theme().radius),
+                            ),
+                    );
+                }
+
+                items
+            })
+    }
+
     fn render_message_replies(
         &self,
         replies: &[EventId],
@@ -1435,6 +1485,7 @@ impl Focusable for ChatPanel {
 impl Render for ChatPanel {
     fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         v_flex()
+            .image_cache(coop_cache(self.id.clone(), 100))
             .on_action(cx.listener(Self::on_command))
             .size_full()
             .when(*self.subject_bar.read(cx), |this| {

crates/chat_ui/src/text.rs

@@ -69,6 +69,7 @@ impl RenderedText {
 
     pub fn element(&self, id: ElementId, window: &Window, cx: &App) -> AnyElement {
         let code_background = cx.theme().elevated_surface_background;
+        let color = cx.theme().text_accent;
 
         InteractiveText::new(
             id,
@@ -100,6 +101,7 @@ impl RenderedText {
                                 }
                             }
                             Highlight::Mention => HighlightStyle {
+                                color: Some(color),
                                 underline: Some(UnderlineStyle {
                                     thickness: 1.0.into(),
                                     ..Default::default()

crates/common/Cargo.toml

@@ -20,3 +20,4 @@ log.workspace = true
 dirs = "5.0"
 qrcode = "0.14.1"
 bech32 = "0.11.1"
+regex = "1.10"

crates/common/src/caching.rs

@@ -0,0 +1,135 @@
+use std::collections::{HashMap, VecDeque};
+use std::mem::take;
+
+use futures::FutureExt;
+use gpui::{
+    App, AppContext, Asset, AssetLogger, ElementId, Entity, ImageAssetLoader, ImageCache,
+    ImageCacheItem, ImageCacheProvider, ImageSource, Resource, hash,
+};
+
+pub fn coop_cache(id: impl Into<ElementId>, max_items: usize) -> CoopImageCacheProvider {
+    CoopImageCacheProvider {
+        id: id.into(),
+        max_items,
+    }
+}
+
+pub struct CoopImageCacheProvider {
+    id: ElementId,
+    max_items: usize,
+}
+
+impl ImageCacheProvider for CoopImageCacheProvider {
+    fn provide(&mut self, window: &mut gpui::Window, cx: &mut App) -> gpui::AnyImageCache {
+        window
+            .with_global_id(self.id.clone(), |id, window| {
+                window.with_element_state(id, |cache, _| {
+                    let cache = cache.unwrap_or_else(|| CoopImageCache::new(self.max_items, cx));
+                    (cache.clone(), cache)
+                })
+            })
+            .into()
+    }
+}
+
+pub struct CoopImageCache {
+    max_items: usize,
+    usage_list: VecDeque<u64>,
+    cache: HashMap<u64, (ImageCacheItem, Resource)>,
+}
+
+impl CoopImageCache {
+    pub fn new(max_items: usize, cx: &mut App) -> Entity<Self> {
+        cx.new(|cx| {
+            log::info!("Creating CoopImageCache");
+            cx.on_release(|this: &mut Self, cx| {
+                for (ix, (mut image, resource)) in take(&mut this.cache) {
+                    if let Some(Ok(image)) = image.get() {
+                        log::info!("Dropping image {ix}");
+                        cx.drop_image(image, None);
+                    }
+                    ImageSource::Resource(resource).remove_asset(cx);
+                }
+            })
+            .detach();
+
+            CoopImageCache {
+                max_items,
+                usage_list: VecDeque::with_capacity(max_items),
+                cache: HashMap::with_capacity(max_items),
+            }
+        })
+    }
+}
+
+impl ImageCache for CoopImageCache {
+    fn load(
+        &mut self,
+        resource: &Resource,
+        window: &mut gpui::Window,
+        cx: &mut gpui::App,
+    ) -> Option<Result<std::sync::Arc<gpui::RenderImage>, gpui::ImageCacheError>> {
+        let hash = hash(resource);
+
+        if let Some(item) = self.cache.get_mut(&hash) {
+            let current_idx = self
+                .usage_list
+                .iter()
+                .position(|item| *item == hash)
+                .expect("cache has an item usage_list doesn't");
+
+            self.usage_list.remove(current_idx);
+            self.usage_list.push_front(hash);
+
+            return item.0.get();
+        }
+
+        let load_future = AssetLogger::<ImageAssetLoader>::load(resource.clone(), cx);
+        let task = cx.background_executor().spawn(load_future).shared();
+
+        if self.usage_list.len() >= self.max_items {
+            log::info!("Image cache is full, evicting oldest item");
+
+            if let Some(oldest) = self.usage_list.pop_back() {
+                let mut image = self
+                    .cache
+                    .remove(&oldest)
+                    .expect("usage_list has an item cache doesn't");
+
+                if let Some(Ok(image)) = image.0.get() {
+                    log::info!("requesting image to be dropped");
+                    cx.drop_image(image, Some(window));
+                }
+
+                ImageSource::Resource(image.1).remove_asset(cx);
+            }
+        }
+
+        self.cache.insert(
+            hash,
+            (
+                gpui::ImageCacheItem::Loading(task.clone()),
+                resource.clone(),
+            ),
+        );
+        self.usage_list.push_front(hash);
+
+        let entity = window.current_view();
+
+        window
+            .spawn(cx, async move |cx| {
+                let result = task.await;
+
+                if let Err(err) = result {
+                    log::error!("error loading image into cache: {:?}", err);
+                }
+
+                cx.on_next_frame(move |_, cx| {
+                    cx.notify(entity);
+                });
+            })
+            .detach();
+
+        None
+    }
+}

crates/common/src/lib.rs

@@ -1,13 +1,17 @@
+pub use caching::*;
 pub use debounced_delay::*;
 pub use display::*;
 pub use event::*;
+pub use media_extractor::*;
 pub use parser::*;
 pub use paths::*;
 pub use range::*;
 
+mod caching;
 mod debounced_delay;
 mod display;
 mod event;
+mod media_extractor;
 mod parser;
 mod paths;
 mod range;

crates/common/src/media_extractor.rs

@@ -0,0 +1,117 @@
+use gpui::SharedUri;
+use regex::Regex;
+
+/// Extracts media URLs from a string and returns both the extracted URLs
+/// and the string with media URLs removed
+pub struct MediaExtractor {
+    image_regex: Regex,
+    video_regex: Regex,
+}
+
+impl MediaExtractor {
+    /// Creates a new MediaExtractor with compiled regex patterns
+    pub fn new() -> Self {
+        MediaExtractor {
+            // Match common image extensions
+            image_regex: Regex::new(
+                r#"(?i)\bhttps?://[^\s<>"']+\.(?:jpg|jpeg|png|gif|bmp|webp|svg|ico)(?:\?[^\s<>"']*)?\b"#,
+            ).unwrap(),
+            // Match common video extensions
+            video_regex: Regex::new(
+                r#"(?i)\bhttps?://[^\s<>"']+\.(?:mp4|mov|avi|mkv|webm|flv|wmv|m4v|3gp)(?:\?[^\s<>"']*)?\b"#,
+            ).unwrap(),
+        }
+    }
+
+    /// Extracts all media URLs from a string
+    pub fn extract_media_urls(&self, text: &str) -> Vec<SharedUri> {
+        let mut urls = Vec::new();
+
+        // Extract image URLs
+        for capture in self.image_regex.find_iter(text) {
+            urls.push(capture.as_str().to_string().into());
+        }
+
+        // Extract video URLs
+        // for capture in self.video_regex.find_iter(text) {
+        //     urls.push(capture.as_str().to_string().into());
+        // }
+
+        urls
+    }
+
+    /// Removes all media URLs from a string and returns the cleaned text
+    pub fn remove_media_urls(&self, text: &str) -> String {
+        let mut result = text.to_string();
+
+        // Remove image URLs
+        result = self.image_regex.replace_all(&result, "").to_string();
+
+        // Remove video URLs
+        // result = self.video_regex.replace_all(&result, "").to_string();
+
+        // Clean up extra whitespace that might result from removal
+        self.cleanup_text(&result)
+    }
+
+    /// Extracts media URLs and removes them from the string, returning both
+    pub fn extract_and_remove(&self, text: &str) -> (Vec<SharedUri>, String) {
+        let urls = self.extract_media_urls(text);
+        let cleaned_text = self.remove_media_urls(text);
+        (urls, cleaned_text)
+    }
+
+    /// Helper function to clean up text after URL removal
+    fn cleanup_text(&self, text: &str) -> String {
+        let text = text.trim();
+
+        // Remove multiple consecutive spaces
+        let re = Regex::new(r"\s+").unwrap();
+        re.replace_all(text, " ").trim().to_string()
+    }
+
+    /// Validates if a URL is a valid media URL
+    pub fn is_media_url(&self, url: &str) -> bool {
+        self.image_regex.is_match(url) || self.video_regex.is_match(url)
+    }
+
+    /// Categorizes extracted URLs into images and videos
+    pub fn categorize_urls(&self, urls: &[SharedUri]) -> (Vec<SharedUri>, Vec<SharedUri>) {
+        let mut images = Vec::new();
+        let mut videos = Vec::new();
+
+        for url in urls {
+            if self.image_regex.is_match(url) {
+                images.push(url.clone());
+            } else if self.video_regex.is_match(url) {
+                videos.push(url.clone());
+            }
+        }
+
+        (images, videos)
+    }
+}
+
+impl Default for MediaExtractor {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Convenience function for one-time extraction and removal
+pub fn extract_and_remove_media_urls(text: &str) -> (Vec<SharedUri>, String) {
+    let extractor = MediaExtractor::new();
+    extractor.extract_and_remove(text)
+}
+
+/// Convenience function for just extracting media URLs
+pub fn extract_media_urls(text: &str) -> Vec<SharedUri> {
+    let extractor = MediaExtractor::new();
+    extractor.extract_media_urls(text)
+}
+
+/// Convenience function for just removing media URLs
+pub fn remove_media_urls(text: &str) -> String {
+    let extractor = MediaExtractor::new();
+    extractor.remove_media_urls(text)
+}

crates/state/src/constants.rs

@@ -15,6 +15,9 @@ pub const KEYRING: &str = "Coop Safe Storage";
 /// Default timeout for subscription
 pub const TIMEOUT: u64 = 2;
 
+/// Default image cache size
+pub const IMAGE_CACHE_SIZE: usize = 20;
+
 /// Default delay for searching
 pub const FIND_DELAY: u64 = 600;