Support emoji shortcodes in chat (#8455)

Completes: https://github.com/zed-industries/zed/issues/7299

Suggestions


https://github.com/zed-industries/zed/assets/53836821/2a81ba89-4634-4d94-8370-6f76ff3e9403

Automatically replacing shortcodes without using the completions (only
enabled when `message_editor` > `auto_replace_emoji_shortcode` is
enabled in the settings):


https://github.com/zed-industries/zed/assets/53836821/10ef2b4b-c67b-4202-b958-332a37dc088e






Release Notes:

- Added autocompletion for emojis in chat when typing emoji shortcodes
([#7299](https://github.com/zed-industries/zed/issues/7299)).
- Added support for automatically replacing emoji shortcodes in chat
(e.g. typing "👋" will be converted to "👋")

---------

Co-authored-by: Conrad Irwin <conrad.irwin@gmail.com>

crates/collab_ui/Cargo.toml

@@ -37,6 +37,7 @@ clock.workspace = true
 collections.workspace = true
 db.workspace = true
 editor.workspace = true
+emojis.workspace = true
 extensions_ui.workspace = true
 feedback.workspace = true
 futures.workspace = true

crates/collab_ui/src/chat_panel/message_editor.rs

@@ -3,7 +3,7 @@ use channel::{ChannelMembership, ChannelStore, MessageParams};
 use client::{ChannelId, UserId};
 use collections::{HashMap, HashSet};
 use editor::{AnchorRangeExt, CompletionProvider, Editor, EditorElement, EditorStyle};
-use fuzzy::StringMatchCandidate;
+use fuzzy::{StringMatch, StringMatchCandidate};
 use gpui::{
     AsyncWindowContext, FocusableView, FontStyle, FontWeight, HighlightStyle, IntoElement, Model,
     Render, SharedString, Task, TextStyle, View, ViewContext, WeakView, WhiteSpace,
@@ -16,10 +16,12 @@ use lazy_static::lazy_static;
 use parking_lot::RwLock;
 use project::search::SearchQuery;
 use settings::Settings;
-use std::{sync::Arc, time::Duration};
+use std::{ops::Range, sync::Arc, time::Duration};
 use theme::ThemeSettings;
 use ui::{prelude::*, UiTextSize};
 
+use crate::panel_settings::MessageEditorSettings;
+
 const MENTIONS_DEBOUNCE_INTERVAL: Duration = Duration::from_millis(50);
 
 lazy_static! {
@@ -86,6 +88,11 @@ impl MessageEditor {
             editor.set_soft_wrap_mode(SoftWrap::EditorWidth, cx);
             editor.set_use_autoclose(false);
             editor.set_completion_provider(Box::new(MessageEditorCompletionProvider(this)));
+            editor.set_auto_replace_emoji_shortcode(
+                MessageEditorSettings::get_global(cx)
+                    .auto_replace_emoji_shortcode
+                    .unwrap_or_default(),
+            );
         });
 
         let buffer = editor
@@ -96,6 +103,16 @@ impl MessageEditor {
             .expect("message editor must be singleton");
 
         cx.subscribe(&buffer, Self::on_buffer_event).detach();
+        cx.observe_global::<settings::SettingsStore>(|view, cx| {
+            view.editor.update(cx, |editor, cx| {
+                editor.set_auto_replace_emoji_shortcode(
+                    MessageEditorSettings::get_global(cx)
+                        .auto_replace_emoji_shortcode
+                        .unwrap_or_default(),
+                )
+            })
+        })
+        .detach();
 
         let markdown = language_registry.language_for_name("Markdown");
         cx.spawn(|_, mut cx| async move {
@@ -219,6 +236,101 @@ impl MessageEditor {
         end_anchor: Anchor,
         cx: &mut ViewContext<Self>,
     ) -> Task<Result<Vec<Completion>>> {
+        if let Some((start_anchor, query, candidates)) =
+            self.collect_mention_candidates(buffer, end_anchor, cx)
+        {
+            if !candidates.is_empty() {
+                return cx.spawn(|_, cx| async move {
+                    Ok(Self::resolve_completions_for_candidates(
+                        &cx,
+                        query.as_str(),
+                        &candidates,
+                        start_anchor..end_anchor,
+                        Self::completion_for_mention,
+                    )
+                    .await)
+                });
+            }
+        }
+
+        if let Some((start_anchor, query, candidates)) =
+            self.collect_emoji_candidates(buffer, end_anchor, cx)
+        {
+            if !candidates.is_empty() {
+                return cx.spawn(|_, cx| async move {
+                    Ok(Self::resolve_completions_for_candidates(
+                        &cx,
+                        query.as_str(),
+                        candidates,
+                        start_anchor..end_anchor,
+                        Self::completion_for_emoji,
+                    )
+                    .await)
+                });
+            }
+        }
+
+        Task::ready(Ok(vec![]))
+    }
+
+    async fn resolve_completions_for_candidates(
+        cx: &AsyncWindowContext,
+        query: &str,
+        candidates: &[StringMatchCandidate],
+        range: Range<Anchor>,
+        completion_fn: impl Fn(&StringMatch) -> (String, CodeLabel),
+    ) -> Vec<Completion> {
+        let matches = fuzzy::match_strings(
+            &candidates,
+            &query,
+            true,
+            10,
+            &Default::default(),
+            cx.background_executor().clone(),
+        )
+        .await;
+
+        matches
+            .into_iter()
+            .map(|mat| {
+                let (new_text, label) = completion_fn(&mat);
+                Completion {
+                    old_range: range.clone(),
+                    new_text,
+                    label,
+                    documentation: None,
+                    server_id: LanguageServerId(0), // TODO: Make this optional or something?
+                    lsp_completion: Default::default(), // TODO: Make this optional or something?
+                }
+            })
+            .collect()
+    }
+
+    fn completion_for_mention(mat: &StringMatch) -> (String, CodeLabel) {
+        let label = CodeLabel {
+            filter_range: 1..mat.string.len() + 1,
+            text: format!("@{}", mat.string),
+            runs: Vec::new(),
+        };
+        (mat.string.clone(), label)
+    }
+
+    fn completion_for_emoji(mat: &StringMatch) -> (String, CodeLabel) {
+        let emoji = emojis::get_by_shortcode(&mat.string).unwrap();
+        let label = CodeLabel {
+            filter_range: 1..mat.string.len() + 1,
+            text: format!(":{}: {}", mat.string, emoji),
+            runs: Vec::new(),
+        };
+        (emoji.to_string(), label)
+    }
+
+    fn collect_mention_candidates(
+        &mut self,
+        buffer: &Model<Buffer>,
+        end_anchor: Anchor,
+        cx: &mut ViewContext<Self>,
+    ) -> Option<(Anchor, String, Vec<StringMatchCandidate>)> {
         let end_offset = end_anchor.to_offset(buffer.read(cx));
 
         let Some(query) = buffer.update(cx, |buffer, _| {
@@ -232,9 +344,9 @@ impl MessageEditor {
                 }
                 query.push(ch);
             }
-            return None;
+            None
         }) else {
-            return Task::ready(Ok(vec![]));
+            return None;
         };
 
         let start_offset = end_offset - query.len();
@@ -258,33 +370,59 @@ impl MessageEditor {
                 char_bag: user.chars().collect(),
             })
             .collect::<Vec<_>>();
-        cx.spawn(|_, cx| async move {
-            let matches = fuzzy::match_strings(
-                &candidates,
-                &query,
-                true,
-                10,
-                &Default::default(),
-                cx.background_executor().clone(),
-            )
-            .await;
 
-            Ok(matches
-                .into_iter()
-                .map(|mat| Completion {
-                    old_range: start_anchor..end_anchor,
-                    new_text: mat.string.clone(),
-                    label: CodeLabel {
-                        filter_range: 1..mat.string.len() + 1,
-                        text: format!("@{}", mat.string),
-                        runs: Vec::new(),
-                    },
-                    documentation: None,
-                    server_id: LanguageServerId(0), // TODO: Make this optional or something?
-                    lsp_completion: Default::default(), // TODO: Make this optional or something?
-                })
-                .collect())
-        })
+        Some((start_anchor, query, candidates))
+    }
+
+    fn collect_emoji_candidates(
+        &mut self,
+        buffer: &Model<Buffer>,
+        end_anchor: Anchor,
+        cx: &mut ViewContext<Self>,
+    ) -> Option<(Anchor, String, &'static [StringMatchCandidate])> {
+        lazy_static! {
+            static ref EMOJI_FUZZY_MATCH_CANDIDATES: Vec<StringMatchCandidate> = {
+                let emojis = emojis::iter()
+                    .flat_map(|s| s.shortcodes())
+                    .map(|emoji| StringMatchCandidate {
+                        id: 0,
+                        string: emoji.to_string(),
+                        char_bag: emoji.chars().collect(),
+                    })
+                    .collect::<Vec<_>>();
+                emojis
+            };
+        }
+
+        let end_offset = end_anchor.to_offset(buffer.read(cx));
+
+        let Some(query) = buffer.update(cx, |buffer, _| {
+            let mut query = String::new();
+            for ch in buffer.reversed_chars_at(end_offset).take(100) {
+                if ch == ':' {
+                    let next_char = buffer
+                        .reversed_chars_at(end_offset - query.len() - 1)
+                        .next();
+                    // Ensure we are at the start of the message or that the previous character is a whitespace
+                    if next_char.is_none() || next_char.unwrap().is_whitespace() {
+                        return Some(query.chars().rev().collect::<String>());
+                    }
+                    break;
+                }
+                if ch.is_whitespace() || !ch.is_ascii() {
+                    break;
+                }
+                query.push(ch);
+            }
+            None
+        }) else {
+            return None;
+        };
+
+        let start_offset = end_offset - query.len() - 1;
+        let start_anchor = buffer.read(cx).anchor_before(start_offset);
+
+        Some((start_anchor, query, &EMOJI_FUZZY_MATCH_CANDIDATES))
     }
 
     async fn find_mentions(
@@ -465,6 +603,8 @@ mod tests {
             editor::init(cx);
             client::init(&client, cx);
             channel::init(&client, user_store, cx);
+
+            MessageEditorSettings::register(cx);
         });
 
         let language_registry = Arc::new(LanguageRegistry::test());

crates/collab_ui/src/collab_ui.rs

@@ -16,6 +16,7 @@ use gpui::{
     actions, point, AppContext, GlobalPixels, Pixels, PlatformDisplay, Size, Task, WindowBounds,
     WindowContext, WindowKind, WindowOptions,
 };
+use panel_settings::MessageEditorSettings;
 pub use panel_settings::{
     ChatPanelSettings, CollaborationPanelSettings, NotificationPanelSettings,
 };
@@ -31,6 +32,7 @@ pub fn init(app_state: &Arc<AppState>, cx: &mut AppContext) {
     CollaborationPanelSettings::register(cx);
     ChatPanelSettings::register(cx);
     NotificationPanelSettings::register(cx);
+    MessageEditorSettings::register(cx);
 
     vcs_menu::init(cx);
     collab_titlebar_item::init(cx);

crates/collab_ui/src/panel_settings.rs

@@ -42,6 +42,15 @@ pub struct PanelSettingsContent {
     pub default_width: Option<f32>,
 }
 
+#[derive(Clone, Default, Serialize, Deserialize, JsonSchema, Debug)]
+pub struct MessageEditorSettings {
+    /// Whether to automatically replace emoji shortcodes with emoji characters.
+    /// For example: typing `:wave:` gets replaced with `👋`.
+    ///
+    /// Default: false
+    pub auto_replace_emoji_shortcode: Option<bool>,
+}
+
 impl Settings for CollaborationPanelSettings {
     const KEY: Option<&'static str> = Some("collaboration_panel");
     type FileContent = PanelSettingsContent;
@@ -77,3 +86,15 @@ impl Settings for NotificationPanelSettings {
         Self::load_via_json_merge(default_value, user_values)
     }
 }
+
+impl Settings for MessageEditorSettings {
+    const KEY: Option<&'static str> = Some("message_editor");
+    type FileContent = MessageEditorSettings;
+    fn load(
+        default_value: &Self::FileContent,
+        user_values: &[&Self::FileContent],
+        _: &mut gpui::AppContext,
+    ) -> anyhow::Result<Self> {
+        Self::load_via_json_merge(default_value, user_values)
+    }
+}