reya/coop
1
0
Fork 0
Code Issues Pull Requests 1 Releases 3 Activity

feat: redesign the sidebar and workspace (#53)

Browse Source 
Reviewed-on: #53
This commit was merged in pull request #53.
This commit is contained in:
reya
2026-09-25 02:26:31 +00:00
parent 1032ac3751
commit e4e13b0889
38 changed files with 2378 additions and 2484 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/chat_ui/Cargo.toml
-3
View File
@@ -23,7 +23,4 @@ futures.workspace = true
log.workspace = true
serde.workspace = true
linkify = "0.10.0"
pulldown-cmark = "0.13.1"
regex = "1"
crates/chat_ui/src/lib.rs
+70 -82
View File
@@ -31,13 +31,11 @@ use ui::button::{Button, ButtonVariants};
use ui::dock::{Panel, PanelEvent};
use ui::input::{Input, InputEvent, InputState, Textarea, TextareaState};
use ui::menu::DropdownMenu;
use ui::message::{MessageRow, WelcomeMessage};
use ui::notification::Notification;
use ui::scroll::Scrollbar;
use ui::tooltip::Tooltip;
use ui::{
Disableable, Icon, IconName, InteractiveElementExt, Sizable, StyledExt, WindowExtension,
h_flex, v_flex,
};
use ui::{Disableable, Icon, IconName, Sizable, StyledExt, WindowExtension, h_flex, v_flex};
use crate::file::*;
use crate::text::RenderedText;
@@ -45,6 +43,10 @@ use crate::text::RenderedText;
const REACTION_EMOJIS: &[&str] = &["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"];
const COMPACT_REACTION_EMOJIS: &[&str] = &["👍", "❤️", "👀"];
/// Notice shown when a conversation has no messages, and above the message list.
const PRIVATE_NOTICE: &str =
"This conversation is private. Only members can see each other's messages.";
/// Regex matching strings that consist entirely of emoji characters,
/// zero-width joiners, variation selectors, and keycap combiners.
static EMOJI_RE: LazyLock<Regex> =
@@ -126,9 +128,8 @@ impl ChatPanel {
let replies_to = cx.new(|_| HashSet::new());
let reports_by_id = Arc::new(RwLock::new(BTreeMap::new()));
// Define list of messages
let messages = Vec::new();
let list_state = ListState::new(messages.len(), ListAlignment::Bottom, px(1024.));
let list_state = ListState::new(messages.len() + 1, ListAlignment::Bottom, px(1024.));
// Get room id and name
let (id, name) = room
@@ -577,7 +578,6 @@ impl ChatPanel {
where
E: Into<Message>,
{
let old_len = self.messages.len();
let msg: Message = m.into();
if let Err(pos) = self.messages.binary_search(&msg) {
@@ -586,7 +586,8 @@ impl ChatPanel {
for (i, message) in self.messages.iter().enumerate().skip(pos) {
self.message_index.insert(message.id, i);
}
self.list_state.splice(old_len..old_len, 1);
let len = self.list_state.item_count();
self.list_state.splice(len..len, 1);
if scroll {
self.list_state.scroll_to(ListOffset {
@@ -657,7 +658,8 @@ impl ChatPanel {
/// Scroll to a message by its ID
fn scroll_to(&self, id: &EventId) {
if let Some(ix) = self.messages.iter().position(|msg| &msg.id == id) {
self.list_state.scroll_to_reveal_item(ix);
// The welcome message occupies the first row, so message rows sit one ahead.
self.list_state.scroll_to_reveal_item(ix + 1);
}
}
@@ -1051,10 +1053,19 @@ impl ChatPanel {
cx.open_url(&content);
}
fn render_announcement(&self, cx: &Context<Self>) -> AnyElement {
const MSG: &str =
"This conversation is private. Only members can see each other's messages.";
fn render_welcome(&self, cx: &Context<Self>) -> AnyElement {
WelcomeMessage::new("welcome")
.icon(
svg()
.path("brand/coop.svg")
.size_12()
.text_color(cx.theme().ghost_element_background_alt),
)
.message(PRIVATE_NOTICE)
.into_any_element()
}
fn render_announcement(&self, cx: &Context<Self>) -> AnyElement {
v_flex()
.h_40()
.w_full()
@@ -1072,7 +1083,7 @@ impl ChatPanel {
.size_12()
.text_color(cx.theme().ghost_element_active),
)
.child(MSG)
.child(PRIVATE_NOTICE)
.into_any_element()
}
@@ -1141,7 +1152,14 @@ impl ChatPanel {
window: &mut Window,
cx: &mut Context<Self>,
) -> AnyElement {
let file = self.messages.get(ix).and_then(|message| {
if ix == 0 {
return self.render_welcome(cx);
}
// The welcome message occupies the first row, so message rows sit one ahead.
let index = ix - 1;
let file = self.messages.get(index).and_then(|message| {
let file = message.file.clone()?;
(!self.decrypted_files.contains_key(&message.id) && file.is_image())
.then_some((message.id, file))
@@ -1151,14 +1169,14 @@ impl ChatPanel {
self.load_file(id, file, cx);
}
if let Some(message) = self.messages.get(ix) {
if let Some(message) = self.messages.get(index) {
let persons = PersonRegistry::global(cx);
let show_author = self.is_group_start(ix);
let show_author = self.is_group_start(index);
let text = self
.rendered_texts_by_id
.entry(message.id)
.or_insert_with(|| {
RenderedText::new(&message.content, &message.mentions, &persons, true, cx)
text::rendered_text(&message.content, &message.mentions, &persons, true, cx)
})
.element(ix.into(), window, cx);
@@ -1188,68 +1206,38 @@ impl ChatPanel {
// Hide avatar setting
let hide_avatar = AppSettings::get_hide_avatar(cx);
div()
.id(ix)
.group("")
.relative()
.w_full()
.py_1()
.px_3()
.child(
div()
.flex()
.gap_3()
.when(!hide_avatar, |this| {
if show_author {
this.child(
Avatar::new(author.avatar())
.seed(author.avatar_seed())
.flex_shrink_0()
.relative()
.dropdown_menu(move |this, _window, _cx| {
this.menu("Public Key", Box::new(Command::Copy(pk)))
.menu("View Relays", Box::new(Command::Relays(pk)))
.separator()
.menu("View on njump.me", Box::new(Command::Njump(pk)))
}),
)
} else {
this.child(div().flex_shrink_0().w(px(32.)))
}
})
.child(
v_flex()
.flex_1()
.w_full()
.flex_initial()
.overflow_hidden()
.when(show_author, |this| {
this.child(
h_flex()
.gap_2()
.text_sm()
.text_color(cx.theme().text_placeholder)
.child(div().font_semibold().child(author.name()))
.child(message.created_at.to_human_time())
.when(has_reports, |this| {
this.child(self.render_sent_reports(&id, cx))
}),
)
})
.when(has_replies, |this| {
this.children(self.render_message_replies(replies, cx))
})
.when(message.file.is_none(), |this| this.child(rendered_text))
.child(self.render_media(&message.media, cx))
.when_some(message.file.as_ref(), |this, file| {
this.child(self.render_message_file(&id, file, cx))
})
.when(has_reactions, |this| {
this.child(self.render_reactions(&id, cx))
}),
),
MessageRow::new(ix)
.show_author(show_author)
.hide_avatar(hide_avatar)
.avatar(
Avatar::new(author.avatar())
.seed(author.avatar_seed())
.flex_shrink_0()
.relative()
.dropdown_menu(move |this, _window, _cx| {
this.menu("Public Key", Box::new(Command::Copy(pk)))
.menu("View Relays", Box::new(Command::Relays(pk)))
.separator()
.menu("View on njump.me", Box::new(Command::Njump(pk)))
}),
)
.child(
.author(author.name())
.timestamp(message.created_at.to_human_time())
.when(has_reports, |this| {
this.header_extra(self.render_sent_reports(&id, cx))
})
.when(has_replies, |this| {
this.children(self.render_message_replies(replies, cx))
})
.when(message.file.is_none(), |this| this.child(rendered_text))
.child(self.render_media(&message.media, cx))
.when_some(message.file.as_ref(), |this, file| {
this.child(self.render_message_file(&id, file, cx))
})
.when(has_reactions, |this| {
this.child(self.render_reactions(&id, cx))
})
.overlay(
div()
.group_hover("", |this| this.bg(cx.theme().element_active))
.absolute()
@@ -1259,7 +1247,7 @@ impl ChatPanel {
.h_full()
.bg(cx.theme().border_transparent),
)
.child(self.render_actions(&id, &pk, cx))
.overlay(self.render_actions(&id, &pk, cx))
.on_mouse_down(
MouseButton::Middle,
cx.listener(move |this, _, _window, cx| {
@@ -1269,7 +1257,6 @@ impl ChatPanel {
.on_double_click(cx.listener(move |this, _, _window, cx| {
this.reply_to(&id, cx);
}))
.hover(|this| this.bg(cx.theme().surface_background))
.into_any_element()
}
@@ -1983,12 +1970,13 @@ impl Panel for ChatPanel {
let seed = this.display_image_seed(cx);
h_flex()
.gap_1p5()
.gap_1()
.text_xs()
.child(Avatar::new(picture).seed(seed).xsmall())
.child(label)
.into_any_element()
})
.unwrap_or(div().child("Unknown").into_any_element())
.unwrap_or(div().text_xs().child("Unknown").into_any_element())
}
fn toolbar_buttons(&self, _window: &Window, _cx: &App) -> Vec<Button> {
crates/chat_ui/src/text.rs
+22 -482
View File
@@ -1,488 +1,28 @@
use std::ops::Range;
use std::sync::{Arc, LazyLock};
use chat::Mention;
use gpui::{
AnyElement, App, ElementId, Entity, FontStyle, FontWeight, HighlightStyle, InteractiveText,
IntoElement, SharedString, StrikethroughStyle, StyledText, UnderlineStyle, Window,
};
use gpui::{App, Entity};
use person::PersonRegistry;
use regex::Regex;
use theme::ActiveTheme;
use ui::markdown::InlineReplacement;
pub use ui::markdown::RenderedText;
/// Matches `http://` and `https://` URLs. Only these are treated as clickable links.
static WEB_URL: LazyLock<Regex> = LazyLock::new(|| Regex::new(r"(?i)^https?://").unwrap());
#[allow(clippy::enum_variant_names)]
#[derive(Debug, Clone, PartialEq, Eq)]
pub enum Highlight {
Code,
InlineCode(bool),
Highlight(HighlightStyle),
Mention,
}
impl From<HighlightStyle> for Highlight {
fn from(style: HighlightStyle) -> Self {
Self::Highlight(style)
}
}
#[derive(Default)]
pub struct RenderedText {
pub text: SharedString,
pub highlights: Vec<(Range<usize>, Highlight)>,
pub link_ranges: Vec<Range<usize>>,
pub link_urls: Arc<[String]>,
}
impl RenderedText {
pub fn new(
content: &str,
mentions: &[Mention],
persons: &Entity<PersonRegistry>,
markdown: bool,
cx: &App,
) -> Self {
Self::render(content, mentions, markdown, |mention| {
format!("@{}", persons.read(cx).get(&mention.public_key, cx).name())
})
}
fn render(
content: &str,
mentions: &[Mention],
markdown: bool,
resolve_mention: impl Fn(&Mention) -> String,
) -> Self {
let mut text = String::new();
let mut highlights = Vec::new();
let mut link_ranges = Vec::new();
let mut link_urls = Vec::new();
render_text_mut(
content,
mentions,
&mut text,
&mut highlights,
&mut link_ranges,
&mut link_urls,
markdown,
resolve_mention,
);
// Trim trailing whitespace and adjust highlight and link ranges.
let trimmed_len = text.trim_end().len();
// Retain highlights and link ranges that are within the trimmed text.
if trimmed_len < text.len() {
highlights.retain_mut(|(range, _)| {
range.end = range.end.min(trimmed_len);
range.start < range.end
});
let mut ix = 0;
while ix < link_ranges.len() {
let range = &mut link_ranges[ix];
range.end = range.end.min(trimmed_len);
if range.start < range.end {
ix += 1;
} else {
link_ranges.remove(ix);
link_urls.remove(ix);
}
}
text.truncate(trimmed_len);
}
RenderedText {
text: SharedString::from(text),
link_urls: link_urls.into(),
link_ranges,
highlights,
}
}
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;
let code_font = if cfg!(target_os = "macos") {
"Menlo"
} else if cfg!(target_os = "windows") {
"Consolas"
} else {
"monospace"
};
InteractiveText::new(
id,
StyledText::new(self.text.clone())
.with_default_highlights(
&window.text_style(),
self.highlights.iter().map(|(range, highlight)| {
(
range.clone(),
match highlight {
Highlight::Code => HighlightStyle {
background_color: Some(code_background),
..Default::default()
},
Highlight::InlineCode(link) => {
if *link {
HighlightStyle {
background_color: Some(code_background),
underline: Some(UnderlineStyle {
thickness: 1.0.into(),
..Default::default()
}),
..Default::default()
}
} else {
HighlightStyle {
background_color: Some(code_background),
..Default::default()
}
}
}
Highlight::Mention => HighlightStyle {
color: Some(color),
underline: Some(UnderlineStyle {
thickness: 1.0.into(),
..Default::default()
}),
..Default::default()
},
Highlight::Highlight(highlight) => *highlight,
},
)
}),
)
.with_font_family_overrides(self.highlights.iter().filter_map(
|(range, highlight)| match highlight {
Highlight::Code | Highlight::InlineCode(_) => {
Some((range.clone(), code_font.into()))
}
_ => None,
},
)),
)
.on_click(self.link_ranges.clone(), {
let link_urls = self.link_urls.clone();
move |ix, _, cx| {
let url = &link_urls[ix];
if WEB_URL.is_match(url) {
cx.open_url(url);
}
}
})
.into_any_element()
}
}
#[allow(clippy::too_many_arguments)]
fn render_text_mut(
block: &str,
mut mentions: &[Mention],
text: &mut String,
highlights: &mut Vec<(Range<usize>, Highlight)>,
link_ranges: &mut Vec<Range<usize>>,
link_urls: &mut Vec<String>,
/// Render message `content` to text, replacing mentions with their display names.
///
/// When `markdown` is set the content is parsed as markdown.
pub fn rendered_text(
content: &str,
mentions: &[Mention],
persons: &Entity<PersonRegistry>,
markdown: bool,
resolve_mention: impl Fn(&Mention) -> String,
) {
use pulldown_cmark::{Event, Options, Parser, Tag, TagEnd};
cx: &App,
) -> RenderedText {
let replacements = mentions
.iter()
.map(|mention| {
InlineReplacement::new(
mention.range.clone(),
format!("@{}", persons.read(cx).get(&mention.public_key, cx).name()),
)
})
.collect::<Vec<_>>();
let mut bold_depth = 0;
let mut italic_depth = 0;
let mut strikethrough_depth = 0;
let mut link_url = None;
let mut list_stack = Vec::new();
let mut code_block = false;
// Only enable the extensions that make sense for chat messages. Notably this leaves
// out smart punctuation, tables, math and footnotes: they rewrite or swallow text.
let events: Box<dyn Iterator<Item = (Event<'_>, Range<usize>)> + '_> = if markdown {
Box::new(Parser::new_ext(block, Options::ENABLE_STRIKETHROUGH).into_offset_iter())
} else {
Box::new(std::iter::once((Event::Text(block.into()), 0..block.len())))
};
for (event, source_range) in events {
let prev_len = text.len();
match event {
Event::Text(t) => {
if code_block {
text.push_str(t.as_ref());
highlights.push((prev_len..text.len(), Highlight::Code));
continue;
}
let t_str = t.as_ref();
let mut last_processed = 0;
while let Some(mention) = mentions.first() {
if mention.range.start >= source_range.end {
break;
}
mentions = &mentions[1..];
if mention.range.start < source_range.start
|| mention.range.end > source_range.end
{
continue;
}
let Some(token) = block.get(mention.range.clone()) else {
continue;
};
let Some(offset) = t_str[last_processed..].find(token) else {
continue;
};
let mention_start_in_text = last_processed + offset;
let mention_end_in_text = mention_start_in_text + token.len();
// Add text before this mention
if mention_start_in_text > last_processed {
let before_mention = &t_str[last_processed..mention_start_in_text];
process_text_segment(
before_mention,
bold_depth,
italic_depth,
strikethrough_depth,
link_url.clone(),
text,
highlights,
link_ranges,
link_urls,
);
}
// Process the mention replacement
let replacement_text = resolve_mention(mention);
let replacement_start = text.len();
text.push_str(&replacement_text);
let replacement_end = text.len();
highlights.push((replacement_start..replacement_end, Highlight::Mention));
last_processed = mention_end_in_text;
}
// Add any remaining text after the last mention
if last_processed < t_str.len() {
let remaining_text = &t_str[last_processed..];
process_text_segment(
remaining_text,
bold_depth,
italic_depth,
strikethrough_depth,
link_url.clone(),
text,
highlights,
link_ranges,
link_urls,
);
}
}
Event::Code(t) => {
text.push_str(t.as_ref());
let is_link = link_url.is_some();
if let Some(link_url) = link_url.clone() {
link_ranges.push(prev_len..text.len());
link_urls.push(link_url);
}
highlights.push((prev_len..text.len(), Highlight::InlineCode(is_link)))
}
Event::Start(tag) => match tag {
Tag::Paragraph => new_paragraph(text, &mut list_stack),
Tag::Heading { .. } => {
new_paragraph(text, &mut list_stack);
bold_depth += 1;
}
Tag::CodeBlock(_kind) => {
new_paragraph(text, &mut list_stack);
code_block = true;
}
Tag::Emphasis => italic_depth += 1,
Tag::Strong => bold_depth += 1,
Tag::Strikethrough => strikethrough_depth += 1,
Tag::Link { dest_url, .. } => {
link_url = WEB_URL.is_match(&dest_url).then(|| dest_url.to_string());
}
Tag::List(number) => {
list_stack.push((number, false));
}
Tag::Item => {
let len = list_stack.len();
if let Some((list_number, has_content)) = list_stack.last_mut() {
*has_content = false;
if !text.is_empty() && !text.ends_with('\n') {
text.push('\n');
}
for _ in 0..len - 1 {
text.push_str(" ");
}
if let Some(number) = list_number {
text.push_str(&format!("{}. ", number));
*number += 1;
*has_content = false;
} else {
text.push_str("- ");
}
}
}
_ => {}
},
Event::End(tag) => match tag {
TagEnd::CodeBlock => code_block = false,
TagEnd::Heading(_) => bold_depth -= 1,
TagEnd::Emphasis => italic_depth -= 1,
TagEnd::Strong => bold_depth -= 1,
TagEnd::Strikethrough => strikethrough_depth -= 1,
TagEnd::Link => link_url = None,
TagEnd::List(_) => drop(list_stack.pop()),
_ => {}
},
Event::Html(t) | Event::InlineHtml(t) => text.push_str(t.as_ref()),
Event::Rule => {
new_paragraph(text, &mut list_stack);
text.push_str("────────\n");
}
Event::HardBreak => text.push('\n'),
Event::SoftBreak => text.push('\n'),
_ => {}
}
}
}
#[allow(clippy::too_many_arguments)]
fn process_text_segment(
segment: &str,
bold_depth: i32,
italic_depth: i32,
strikethrough_depth: i32,
link_url: Option<String>,
text: &mut String,
highlights: &mut Vec<(Range<usize>, Highlight)>,
link_ranges: &mut Vec<Range<usize>>,
link_urls: &mut Vec<String>,
) {
// Build the style for this segment
let mut style = HighlightStyle::default();
if bold_depth > 0 {
style.font_weight = Some(FontWeight::BOLD);
}
if italic_depth > 0 {
style.font_style = Some(FontStyle::Italic);
}
if strikethrough_depth > 0 {
style.strikethrough = Some(StrikethroughStyle {
thickness: 1.0.into(),
..Default::default()
});
}
// Ranges always refer to the rendered text, including replaced mentions.
let segment_start = text.len();
text.push_str(segment);
let text_end = text.len();
if let Some(link_url) = link_url {
// Handle as a markdown link
link_ranges.push(segment_start..text_end);
link_urls.push(link_url);
style.underline = Some(UnderlineStyle {
thickness: 1.0.into(),
..Default::default()
});
// Add highlight for the entire linked segment
if style != HighlightStyle::default() {
highlights.push((segment_start..text_end, Highlight::Highlight(style)));
}
} else {
// Handle link detection within the segment
let mut finder = linkify::LinkFinder::new();
finder.kinds(&[linkify::LinkKind::Url]);
let mut last_link_pos = 0;
for link in finder
.links(segment)
.filter(|link| WEB_URL.is_match(link.as_str()))
{
let start = link.start();
let end = link.end();
// Add non-link text before this link
if start > last_link_pos {
let non_link_start = segment_start + last_link_pos;
let non_link_end = segment_start + start;
if style != HighlightStyle::default() {
highlights.push((non_link_start..non_link_end, Highlight::Highlight(style)));
}
}
// Add the link
let range = (segment_start + start)..(segment_start + end);
link_ranges.push(range.clone());
link_urls.push(link.as_str().to_string());
// Apply link styling (underline + existing style)
let mut link_style = style;
link_style.underline = Some(UnderlineStyle {
thickness: 1.0.into(),
..Default::default()
});
highlights.push((range, Highlight::Highlight(link_style)));
last_link_pos = end;
}
// Add any remaining text after the last link
if last_link_pos < segment.len() {
let remaining_start = segment_start + last_link_pos;
let remaining_end = segment_start + segment.len();
if style != HighlightStyle::default() {
highlights.push((remaining_start..remaining_end, Highlight::Highlight(style)));
}
}
}
}
fn new_paragraph(text: &mut String, list_stack: &mut [(Option<u64>, bool)]) {
let mut is_subsequent_paragraph_of_list = false;
if let Some((_, has_content)) = list_stack.last_mut() {
if *has_content {
is_subsequent_paragraph_of_list = true;
} else {
*has_content = true;
return;
}
}
if !text.is_empty() {
if !text.ends_with('\n') {
text.push('\n');
}
text.push('\n');
}
for _ in 0..list_stack.len().saturating_sub(1) {
text.push_str(" ");
}
if is_subsequent_paragraph_of_list {
text.push_str(" ");
}
RenderedText::new(content, &replacements, markdown)
}