Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start work on rendering formatted chat messages

Browse source
This commit is contained in:
Max Brunsfeld 2023-12-08 14:31:01 -08:00
parent 8feb11ccee
commit d03e29d55d
2 changed files with 146 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

28
crates/collab_ui2/src/chat_panel.rs
View file

@ -8,8 +8,8 @@ use db::kvp::KEY_VALUE_STORE;
use editor::Editor; use editor::Editor;
use gpui::{ use gpui::{
actions, div, list, prelude::*, px, serde_json, AnyElement, AppContext, AsyncWindowContext, actions, div, list, prelude::*, px, serde_json, AnyElement, AppContext, AsyncWindowContext,
ClickEvent, Div, EventEmitter, FocusableView, ListOffset, ListScrollEvent, ListState, Model, ClickEvent, Div, ElementId, EventEmitter, FocusableView, ListOffset, ListScrollEvent,
Render, SharedString, Subscription, Task, View, ViewContext, VisualContext, WeakView, ListState, Model, Render, Subscription, Task, View, ViewContext, VisualContext, WeakView,
}; };
use language::LanguageRegistry; use language::LanguageRegistry;
use menu::Confirm; use menu::Confirm;
@ -342,10 +342,15 @@ impl ChatPanel {
None None
}; };
let element_id: ElementId = match message.id {
ChannelMessageId::Saved(id) => ("saved-message", id).into(),
ChannelMessageId::Pending(id) => ("pending-message", id).into(),
};
// todo!("render the text with markdown formatting") // todo!("render the text with markdown formatting")
if is_continuation { if is_continuation {
h_stack() h_stack()
.child(SharedString::from(text.text.clone())) .child(text.element(element_id, cx))
.child(render_remove(message_id_to_remove, cx)) .child(render_remove(message_id_to_remove, cx))
.mb_1() .mb_1()
.into_any() .into_any()
@ -370,7 +375,7 @@ impl ChatPanel {
) )
.child( .child(
h_stack() h_stack()
.child(SharedString::from(text.text.clone())) .child(text.element(element_id, cx))
.child(render_remove(None, cx)), .child(render_remove(None, cx)),
) )
.mb_1() .mb_1()
@ -629,7 +634,7 @@ mod tests {
use super::*; use super::*;
use gpui::HighlightStyle; use gpui::HighlightStyle;
use pretty_assertions::assert_eq; use pretty_assertions::assert_eq;
use rich_text::{BackgroundKind, Highlight, RenderedRegion}; use rich_text::Highlight;
use util::test::marked_text_ranges; use util::test::marked_text_ranges;
#[gpui::test] #[gpui::test]
@ -677,18 +682,5 @@ mod tests {
(ranges[3].clone(), Highlight::SelfMention) (ranges[3].clone(), Highlight::SelfMention)
] ]
); );
assert_eq!(
message.regions,
vec![
RenderedRegion {
background_kind: Some(BackgroundKind::Mention),
link_url: None
},
RenderedRegion {
background_kind: Some(BackgroundKind::SelfMention),
link_url: None
},
]
);
} }
} }

281
crates/rich_text2/src/rich_text.rs
View file

@ -1,13 +1,16 @@
use std::{ops::Range, sync::Arc};
use anyhow::bail;
use futures::FutureExt; use futures::FutureExt;
use gpui::{AnyElement, FontStyle, FontWeight, HighlightStyle, UnderlineStyle, WindowContext}; use gpui::{
AnyElement, ElementId, FontStyle, FontWeight, HighlightStyle, InteractiveText, IntoElement,
SharedString, StyledText, UnderlineStyle, WindowContext,
};
use language::{HighlightId, Language, LanguageRegistry}; use language::{HighlightId, Language, LanguageRegistry};
use std::{ops::Range, sync::Arc};
use theme::ActiveTheme;
use util::RangeExt; use util::RangeExt;
#[derive(Debug, Clone, PartialEq, Eq)] #[derive(Debug, Clone, PartialEq, Eq)]
pub enum Highlight { pub enum Highlight {
Code,
Id(HighlightId), Id(HighlightId),
Highlight(HighlightStyle), Highlight(HighlightStyle),
Mention, Mention,
@ -28,24 +31,10 @@ impl From<HighlightId> for Highlight {
#[derive(Debug, Clone)] #[derive(Debug, Clone)]
pub struct RichText { pub struct RichText {
pub text: String, pub text: SharedString,
pub highlights: Vec<(Range<usize>, Highlight)>, pub highlights: Vec<(Range<usize>, Highlight)>,
pub region_ranges: Vec<Range<usize>>, pub link_ranges: Vec<Range<usize>>,
pub regions: Vec<RenderedRegion>, pub link_urls: Arc<[String]>,
}
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
pub enum BackgroundKind {
Code,
/// A mention background for non-self user.
Mention,
SelfMention,
}
#[derive(Debug, Clone, PartialEq, Eq)]
pub struct RenderedRegion {
pub background_kind: Option<BackgroundKind>,
pub link_url: Option<String>,
} }
/// Allows one to specify extra links to the rendered markdown, which can be used /// Allows one to specify extra links to the rendered markdown, which can be used
@ -56,89 +45,71 @@ pub struct Mention {
} }
impl RichText { impl RichText {
pub fn element(&self, _cx: &mut WindowContext) -> AnyElement { pub fn element(&self, id: ElementId, cx: &mut WindowContext) -> AnyElement {
todo!(); let theme = cx.theme();
let code_background = theme.colors().surface_background;
// let mut region_id = 0; InteractiveText::new(
// let view_id = cx.view_id(); id,
StyledText::new(self.text.clone()).with_highlights(
&cx.text_style(),
self.highlights.iter().map(|(range, highlight)| {
(
range.clone(),
match highlight {
Highlight::Code => HighlightStyle {
background_color: Some(code_background),
..Default::default()
},
Highlight::Id(id) => HighlightStyle {
background_color: Some(code_background),
..id.style(&theme.syntax()).unwrap_or_default()
},
Highlight::Highlight(highlight) => *highlight,
Highlight::Mention => HighlightStyle {
font_weight: Some(FontWeight::BOLD),
..Default::default()
},
Highlight::SelfMention => HighlightStyle {
font_weight: Some(FontWeight::BOLD),
..Default::default()
},
},
)
}),
),
)
.on_click(self.link_ranges.clone(), {
let link_urls = self.link_urls.clone();
move |ix, cx| cx.open_url(&link_urls[ix])
})
.into_any_element()
}
// let regions = self.regions.clone(); // pub fn add_mention(
// &mut self,
// enum Markdown {} // range: Range<usize>,
// Text::new(self.text.clone(), style.text.clone()) // is_current_user: bool,
// .with_highlights( // mention_style: HighlightStyle,
// self.highlights // ) -> anyhow::Result<()> {
// .iter() // if range.end > self.text.len() {
// .filter_map(|(range, highlight)| { // bail!(
// let style = match highlight { // "Mention in range {range:?} is outside of bounds for a message of length {}",
// Highlight::Id(id) => id.style(&syntax)?, // self.text.len()
// Highlight::Highlight(style) => style.clone(),
// Highlight::Mention => style.mention_highlight,
// Highlight::SelfMention => style.self_mention_highlight,
// };
// Some((range.clone(), style))
// })
// .collect::<Vec<_>>(),
// )
// .with_custom_runs(self.region_ranges.clone(), move |ix, bounds, cx| {
// region_id += 1;
// let region = regions[ix].clone();
// if let Some(url) = region.link_url {
// cx.scene().push_cursor_region(CursorRegion {
// bounds,
// style: CursorStyle::PointingHand,
// });
// cx.scene().push_mouse_region(
// MouseRegion::new::<Markdown>(view_id, region_id, bounds)
// .on_click::<V, _>(MouseButton::Left, move |_, _, cx| {
// cx.platform().open_url(&url)
// }),
// ); // );
// } // }
// if let Some(region_kind) = &region.background_kind {
// let background = match region_kind { // if is_current_user {
// BackgroundKind::Code => style.code_background, // self.region_ranges.push(range.clone());
// BackgroundKind::Mention => style.mention_background, // self.regions.push(RenderedRegion {
// BackgroundKind::SelfMention => style.self_mention_background, // background_kind: Some(BackgroundKind::Mention),
// }; // link_url: None,
// if background.is_some() {
// cx.scene().push_quad(gpui::Quad {
// bounds,
// background,
// border: Default::default(),
// corner_radii: (2.0).into(),
// }); // });
// } // }
// self.highlights
// .push((range, Highlight::Highlight(mention_style)));
// Ok(())
// } // }
// })
// .with_soft_wrap(true)
// .into_any()
}
pub fn add_mention(
&mut self,
range: Range<usize>,
is_current_user: bool,
mention_style: HighlightStyle,
) -> anyhow::Result<()> {
if range.end > self.text.len() {
bail!(
"Mention in range {range:?} is outside of bounds for a message of length {}",
self.text.len()
);
}
if is_current_user {
self.region_ranges.push(range.clone());
self.regions.push(RenderedRegion {
background_kind: Some(BackgroundKind::Mention),
link_url: None,
});
}
self.highlights
.push((range, Highlight::Highlight(mention_style)));
Ok(())
}
} }
pub fn render_markdown_mut( pub fn render_markdown_mut(
@ -146,7 +117,10 @@ pub fn render_markdown_mut(
mut mentions: &[Mention], mut mentions: &[Mention],
language_registry: &Arc<LanguageRegistry>, language_registry: &Arc<LanguageRegistry>,
language: Option<&Arc<Language>>, language: Option<&Arc<Language>>,
data: &mut RichText, text: &mut String,
highlights: &mut Vec<(Range<usize>, Highlight)>,
link_ranges: &mut Vec<Range<usize>>,
link_urls: &mut Vec<String>,
) { ) {
use pulldown_cmark::{CodeBlockKind, Event, Options, Parser, Tag}; use pulldown_cmark::{CodeBlockKind, Event, Options, Parser, Tag};
@ -158,18 +132,18 @@ pub fn render_markdown_mut(
let options = Options::all(); let options = Options::all();
for (event, source_range) in Parser::new_ext(&block, options).into_offset_iter() { for (event, source_range) in Parser::new_ext(&block, options).into_offset_iter() {
let prev_len = data.text.len(); let prev_len = text.len();
match event { match event {
Event::Text(t) => { Event::Text(t) => {
if let Some(language) = &current_language { if let Some(language) = &current_language {
render_code(&mut data.text, &mut data.highlights, t.as_ref(), language); render_code(text, highlights, t.as_ref(), language);
} else { } else {
if let Some(mention) = mentions.first() { if let Some(mention) = mentions.first() {
if source_range.contains_inclusive(&mention.range) { if source_range.contains_inclusive(&mention.range) {
mentions = &mentions[1..]; mentions = &mentions[1..];
let range = (prev_len + mention.range.start - source_range.start) let range = (prev_len + mention.range.start - source_range.start)
..(prev_len + mention.range.end - source_range.start); ..(prev_len + mention.range.end - source_range.start);
data.highlights.push(( highlights.push((
range.clone(), range.clone(),
if mention.is_self_mention { if mention.is_self_mention {
Highlight::SelfMention Highlight::SelfMention
@ -177,19 +151,10 @@ pub fn render_markdown_mut(
Highlight::Mention Highlight::Mention
}, },
)); ));
data.region_ranges.push(range);
data.regions.push(RenderedRegion {
background_kind: Some(if mention.is_self_mention {
BackgroundKind::SelfMention
} else {
BackgroundKind::Mention
}),
link_url: None,
});
} }
} }
data.text.push_str(t.as_ref()); text.push_str(t.as_ref());
let mut style = HighlightStyle::default(); let mut style = HighlightStyle::default();
if bold_depth > 0 { if bold_depth > 0 {
style.font_weight = Some(FontWeight::BOLD); style.font_weight = Some(FontWeight::BOLD);
@ -198,11 +163,8 @@ pub fn render_markdown_mut(
style.font_style = Some(FontStyle::Italic); style.font_style = Some(FontStyle::Italic);
} }
if let Some(link_url) = link_url.clone() { if let Some(link_url) = link_url.clone() {
data.region_ranges.push(prev_len..data.text.len()); link_ranges.push(prev_len..text.len());
data.regions.push(RenderedRegion { link_urls.push(link_url);
link_url: Some(link_url),
background_kind: None,
});
style.underline = Some(UnderlineStyle { style.underline = Some(UnderlineStyle {
thickness: 1.0.into(), thickness: 1.0.into(),
..Default::default() ..Default::default()
@ -211,27 +173,25 @@ pub fn render_markdown_mut(
if style != HighlightStyle::default() { if style != HighlightStyle::default() {
let mut new_highlight = true; let mut new_highlight = true;
if let Some((last_range, last_style)) = data.highlights.last_mut() { if let Some((last_range, last_style)) = highlights.last_mut() {
if last_range.end == prev_len if last_range.end == prev_len
&& last_style == &Highlight::Highlight(style) && last_style == &Highlight::Highlight(style)
{ {
last_range.end = data.text.len(); last_range.end = text.len();
new_highlight = false; new_highlight = false;
} }
} }
if new_highlight { if new_highlight {
data.highlights highlights.push((prev_len..text.len(), Highlight::Highlight(style)));
.push((prev_len..data.text.len(), Highlight::Highlight(style)));
} }
} }
} }
} }
Event::Code(t) => { Event::Code(t) => {
data.text.push_str(t.as_ref()); text.push_str(t.as_ref());
data.region_ranges.push(prev_len..data.text.len());
if link_url.is_some() { if link_url.is_some() {
data.highlights.push(( highlights.push((
prev_len..data.text.len(), prev_len..text.len(),
Highlight::Highlight(HighlightStyle { Highlight::Highlight(HighlightStyle {
underline: Some(UnderlineStyle { underline: Some(UnderlineStyle {
thickness: 1.0.into(), thickness: 1.0.into(),
@ -241,19 +201,19 @@ pub fn render_markdown_mut(
}), }),
)); ));
} }
data.regions.push(RenderedRegion { if let Some(link_url) = link_url.clone() {
background_kind: Some(BackgroundKind::Code), link_ranges.push(prev_len..text.len());
link_url: link_url.clone(), link_urls.push(link_url);
}); }
} }
Event::Start(tag) => match tag { Event::Start(tag) => match tag {
Tag::Paragraph => new_paragraph(&mut data.text, &mut list_stack), Tag::Paragraph => new_paragraph(text, &mut list_stack),
Tag::Heading(_, _, _) => { Tag::Heading(_, _, _) => {
new_paragraph(&mut data.text, &mut list_stack); new_paragraph(text, &mut list_stack);
bold_depth += 1; bold_depth += 1;
} }
Tag::CodeBlock(kind) => { Tag::CodeBlock(kind) => {
new_paragraph(&mut data.text, &mut list_stack); new_paragraph(text, &mut list_stack);
current_language = if let CodeBlockKind::Fenced(language) = kind { current_language = if let CodeBlockKind::Fenced(language) = kind {
language_registry language_registry
.language_for_name(language.as_ref()) .language_for_name(language.as_ref())
@ -273,18 +233,18 @@ pub fn render_markdown_mut(
let len = list_stack.len(); let len = list_stack.len();
if let Some((list_number, has_content)) = list_stack.last_mut() { if let Some((list_number, has_content)) = list_stack.last_mut() {
*has_content = false; *has_content = false;
if !data.text.is_empty() && !data.text.ends_with('\n') { if !text.is_empty() && !text.ends_with('\n') {
data.text.push('\n'); text.push('\n');
} }
for _ in 0..len - 1 { for _ in 0..len - 1 {
data.text.push_str(" "); text.push_str(" ");
} }
if let Some(number) = list_number { if let Some(number) = list_number {
data.text.push_str(&format!("{}. ", number)); text.push_str(&format!("{}. ", number));
*number += 1; *number += 1;
*has_content = false; *has_content = false;
} else { } else {
data.text.push_str("- "); text.push_str("- ");
} }
} }
} }
@ -299,8 +259,8 @@ pub fn render_markdown_mut(
Tag::List(_) => drop(list_stack.pop()), Tag::List(_) => drop(list_stack.pop()),
_ => {} _ => {}
}, },
Event::HardBreak => data.text.push('\n'), Event::HardBreak => text.push('\n'),
Event::SoftBreak => data.text.push(' '), Event::SoftBreak => text.push(' '),
_ => {} _ => {}
} }
} }
@ -312,18 +272,35 @@ pub fn render_markdown(
language_registry: &Arc<LanguageRegistry>, language_registry: &Arc<LanguageRegistry>,
language: Option<&Arc<Language>>, language: Option<&Arc<Language>>,
) -> RichText { ) -> RichText {
let mut data = RichText { // let mut data = RichText {
text: Default::default(), // text: Default::default(),
highlights: Default::default(), // highlights: Default::default(),
region_ranges: Default::default(), // region_ranges: Default::default(),
regions: Default::default(), // regions: Default::default(),
}; // };
render_markdown_mut(&block, mentions, language_registry, language, &mut data); let mut text = String::new();
let mut highlights = Vec::new();
let mut link_ranges = Vec::new();
let mut link_urls = Vec::new();
render_markdown_mut(
&block,
mentions,
language_registry,
language,
&mut text,
&mut highlights,
&mut link_ranges,
&mut link_urls,
);
text.truncate(text.trim_end().len());
data.text = data.text.trim().to_string(); RichText {
text: SharedString::from(text),
data link_urls: link_urls.into(),
link_ranges,
highlights,
}
} }
pub fn render_code( pub fn render_code(
@ -334,11 +311,19 @@ pub fn render_code(
) { ) {
let prev_len = text.len(); let prev_len = text.len();
text.push_str(content); text.push_str(content);
let mut offset = 0;
for (range, highlight_id) in language.highlight_text(&content.into(), 0..content.len()) { for (range, highlight_id) in language.highlight_text(&content.into(), 0..content.len()) {
if range.start > offset {
highlights.push((prev_len + offset..prev_len + range.start, Highlight::Code));
}
highlights.push(( highlights.push((
prev_len + range.start..prev_len + range.end, prev_len + range.start..prev_len + range.end,
Highlight::Id(highlight_id), Highlight::Id(highlight_id),
)); ));
offset = range.end;
}
if offset < content.len() {
highlights.push((prev_len + offset..prev_len + content.len(), Highlight::Code));
} }
} }