Skip to content

Commit

Permalink
assistant2: Add stray visual adjustments (#22111)
Browse files Browse the repository at this point in the history 
Mostly minor tweaks to make it closer to the prototype. More to come.

| With message | Empty state |
|--------|--------|
| <img width="1420" alt="Screenshot 2024-12-16 at 18 59 40"
src="https://github.com/user-attachments/assets/5df791bf-577a-4f01-9045-80568604099f"
/> | <img width="1420" alt="Screenshot 2024-12-16 at 18 59 33"
src="https://github.com/user-attachments/assets/adbf1673-3040-4b2b-8d65-f8b38a83c1d0"
/> |

Release Notes:

- N/A
  • Loading branch information
@danilo-leal
danilo-leal authored Dec 16, 2024
1 parent 92fb38a commit 53c8b48
Show file tree
Hide file tree
Showing 10 changed files with 74 additions and 89 deletions.
1 change: 1 addition & 0 deletions assets/icons/message_circle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions assets/icons/person.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 15 additions & 8 deletions crates/assistant2/src/active_thread.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,26 +213,33 @@ impl ActiveThread {

div()
.id(("message-container", ix))
.p_2()
.py_1()
.px_2()
.child(
v_flex()
.border_1()
.border_color(cx.theme().colors().border_variant)
.border_color(cx.theme().colors().border)
.bg(cx.theme().colors().editor_background)
.rounded_md()
.child(
h_flex()
.justify_between()
.p_1p5()
.py_1()
.px_2()
.border_b_1()
.border_color(cx.theme().colors().border_variant)
.child(
h_flex()
.gap_2()
.child(Icon::new(role_icon).size(IconSize::Small))
.child(Label::new(role_name).size(LabelSize::Small)),
.gap_1p5()
.child(
Icon::new(role_icon)
.size(IconSize::XSmall)
.color(Color::Muted),
)
.child(Label::new(role_name).size(LabelSize::XSmall)),
),
)
.child(v_flex().p_1p5().text_ui(cx).child(markdown.clone()))
.child(v_flex().px_2().py_1().text_ui(cx).child(markdown.clone()))
.when_some(context, |parent, context| {
parent.child(
h_flex().flex_wrap().gap_2().p_1p5().children(
Expand All @@ -249,6 +256,6 @@ impl ActiveThread {

impl Render for ActiveThread {
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
list(self.list_state.clone()).flex_1()
list(self.list_state.clone()).flex_1().py_1()
}
}
21 changes: 10 additions & 11 deletions crates/assistant2/src/assistant_panel.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ use gpui::{
};
use language::LanguageRegistry;
use time::UtcOffset;
use ui::{prelude::*, Divider, IconButtonShape, KeyBinding, Tab, Tooltip};
use ui::{prelude::*, KeyBinding, Tab, Tooltip};
use workspace::dock::{DockPosition, Panel, PanelEvent};
use workspace::Workspace;

Expand Down Expand Up @@ -202,7 +202,7 @@ impl Panel for AssistantPanel {
fn set_position(&mut self, _position: DockPosition, _cx: &mut ViewContext<Self>) {}

fn size(&self, _cx: &WindowContext) -> Pixels {
px(640.)
px(550.)
}

fn set_size(&mut self, _size: Option<Pixels>, _cx: &mut ViewContext<Self>) {}
Expand Down Expand Up @@ -238,15 +238,17 @@ impl AssistantPanel {
.px(DynamicSpacing::Base08.rems(cx))
.bg(cx.theme().colors().tab_bar_background)
.border_b_1()
.border_color(cx.theme().colors().border_variant)
.border_color(cx.theme().colors().border)
.child(h_flex().children(self.thread.read(cx).summary(cx).map(Label::new)))
.child(
h_flex()
.gap(DynamicSpacing::Base08.rems(cx))
.child(Divider::vertical())
.h_full()
.pl_1()
.border_l_1()
.border_color(cx.theme().colors().border)
.gap(DynamicSpacing::Base02.rems(cx))
.child(
IconButton::new("new-thread", IconName::Plus)
.shape(IconButtonShape::Square)
.icon_size(IconSize::Small)
.style(ButtonStyle::Subtle)
.tooltip({
Expand All @@ -266,7 +268,6 @@ impl AssistantPanel {
)
.child(
IconButton::new("open-history", IconName::HistoryRerun)
.shape(IconButtonShape::Square)
.icon_size(IconSize::Small)
.style(ButtonStyle::Subtle)
.tooltip({
Expand All @@ -286,7 +287,6 @@ impl AssistantPanel {
)
.child(
IconButton::new("configure-assistant", IconName::Settings)
.shape(IconButtonShape::Square)
.icon_size(IconSize::Small)
.style(ButtonStyle::Subtle)
.tooltip(move |cx| Tooltip::text("Configure Assistant", cx))
Expand All @@ -312,7 +312,6 @@ impl AssistantPanel {

v_flex()
.gap_2()
.mx_auto()
.child(
v_flex().w_full().child(
svg()
Expand All @@ -334,7 +333,7 @@ impl AssistantPanel {
),
)
.child(
v_flex().gap_2().children(
v_flex().mx_auto().w_4_5().gap_2().children(
recent_threads
.into_iter()
.map(|thread| PastThread::new(thread, cx.view().downgrade())),
Expand Down Expand Up @@ -541,7 +540,7 @@ impl Render for AssistantPanel {
.child(
h_flex()
.border_t_1()
.border_color(cx.theme().colors().border_variant)
.border_color(cx.theme().colors().border)
.child(self.message_editor.clone()),
)
.children(self.render_last_error(cx)),
Expand Down
52 changes: 13 additions & 39 deletions crates/assistant2/src/context_picker.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ use gpui::{
WeakModel, WeakView,
};
use picker::{Picker, PickerDelegate};
use ui::{prelude::*, ListItem, ListItemSpacing, Tooltip};
use ui::{prelude::*, ListItem, ListItemSpacing};
use util::ResultExt;
use workspace::Workspace;

Expand Down Expand Up @@ -41,27 +41,23 @@ impl ContextPicker {
) -> Self {
let mut entries = vec![
ContextPickerEntry {
name: "directory".into(),
description: "Insert any directory".into(),
name: "Directory".into(),
icon: IconName::Folder,
},
ContextPickerEntry {
name: "file".into(),
description: "Insert any file".into(),
name: "File".into(),
icon: IconName::File,
},
ContextPickerEntry {
name: "fetch".into(),
description: "Fetch content from URL".into(),
name: "Fetch".into(),
icon: IconName::Globe,
},
];

if thread_store.is_some() {
entries.push(ContextPickerEntry {
name: "thread".into(),
description: "Insert any thread".into(),
icon: IconName::MessageBubbles,
name: "Thread".into(),
icon: IconName::MessageCircle,
});
}

Expand Down Expand Up @@ -119,7 +115,6 @@ impl Render for ContextPicker {
#[derive(Clone)]
struct ContextPickerEntry {
name: SharedString,
description: SharedString,
icon: IconName,
}

Expand Down Expand Up @@ -161,7 +156,7 @@ impl PickerDelegate for ContextPickerDelegate {
self.context_picker
.update(cx, |this, cx| {
match entry.name.to_string().as_str() {
"file" => {
"File" => {
this.mode = ContextPickerMode::File(cx.new_view(|cx| {
FileContextPicker::new(
self.context_picker.clone(),
Expand All @@ -171,7 +166,7 @@ impl PickerDelegate for ContextPickerDelegate {
)
}));
}
"fetch" => {
"Fetch" => {
this.mode = ContextPickerMode::Fetch(cx.new_view(|cx| {
FetchContextPicker::new(
self.context_picker.clone(),
Expand All @@ -181,7 +176,7 @@ impl PickerDelegate for ContextPickerDelegate {
)
}));
}
"thread" => {
"Thread" => {
if let Some(thread_store) = self.thread_store.as_ref() {
this.mode = ContextPickerMode::Thread(cx.new_view(|cx| {
ThreadContextPicker::new(
Expand Down Expand Up @@ -226,34 +221,13 @@ impl PickerDelegate for ContextPickerDelegate {
.inset(true)
.spacing(ListItemSpacing::Dense)
.toggle_state(selected)
.tooltip({
let description = entry.description.clone();
move |cx| cx.new_view(|_cx| Tooltip::new(description.clone())).into()
})
.child(
v_flex()
.group(format!("context-entry-label-{ix}"))
.w_full()
.py_0p5()
h_flex()
.min_w(px(250.))
.max_w(px(400.))
.child(
h_flex()
.gap_1p5()
.child(Icon::new(entry.icon).size(IconSize::XSmall))
.child(
Label::new(entry.name.clone())
.single_line()
.size(LabelSize::Small),
),
)
.child(
div().overflow_hidden().text_ellipsis().child(
Label::new(entry.description.clone())
.size(LabelSize::Small)
.color(Color::Muted),
),
),
.gap_2()
.child(Icon::new(entry.icon).size(IconSize::Small))
.child(Label::new(entry.name.clone()).single_line()),
),
)
}
Expand Down
9 changes: 4 additions & 5 deletions crates/assistant2/src/context_strip.rs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
use std::rc::Rc;

use gpui::{Model, View, WeakModel, WeakView};
use ui::{prelude::*, IconButtonShape, PopoverMenu, PopoverMenuHandle, Tooltip};
use ui::{prelude::*, PopoverMenu, PopoverMenuHandle, Tooltip};
use workspace::Workspace;

use crate::context_picker::ContextPicker;
Expand Down Expand Up @@ -44,14 +44,14 @@ impl Render for ContextStrip {

h_flex()
.flex_wrap()
.gap_2()
.gap_1()
.child(
PopoverMenu::new("context-picker")
.menu(move |_cx| Some(context_picker.clone()))
.trigger(
IconButton::new("add-context", IconName::Plus)
.shape(IconButtonShape::Square)
.icon_size(IconSize::Small),
.icon_size(IconSize::Small)
.style(ui::ButtonStyle::Filled),
)
.attach(gpui::AnchorCorner::TopLeft)
.anchor(gpui::AnchorCorner::BottomLeft)
Expand All @@ -76,7 +76,6 @@ impl Render for ContextStrip {
.when(!context.is_empty(), |parent| {
parent.child(
IconButton::new("remove-all-context", IconName::Eraser)
.shape(IconButtonShape::Square)
.icon_size(IconSize::Small)
.tooltip(move |cx| Tooltip::text("Remove All Context", cx))
.on_click({
Expand Down
38 changes: 17 additions & 21 deletions crates/assistant2/src/message_editor.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ impl MessageEditor {
thread,
editor: cx.new_view(|cx| {
let mut editor = Editor::auto_height(80, cx);
editor.set_placeholder_text("Ask anything or type @ to add context", cx);
editor.set_placeholder_text("Ask anything, @ to add context", cx);
editor.set_show_indent_guides(false, cx);

editor
}),
Expand Down Expand Up @@ -112,8 +113,8 @@ impl MessageEditor {
}

fn render_language_model_selector(&self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let active_provider = LanguageModelRegistry::read_global(cx).active_provider();
let active_model = LanguageModelRegistry::read_global(cx).active_model();
let focus_handle = self.language_model_selector.focus_handle(cx).clone();

LanguageModelSelectorPopoverMenu::new(
self.language_model_selector.clone(),
Expand All @@ -128,16 +129,8 @@ impl MessageEditor {
.overflow_x_hidden()
.flex_grow()
.whitespace_nowrap()
.child(match (active_provider, active_model) {
(Some(provider), Some(model)) => h_flex()
.gap_1()
.child(
Icon::new(
model.icon().unwrap_or_else(|| provider.icon()),
)
.color(Color::Muted)
.size(IconSize::XSmall),
)
.child(match active_model {
Some(model) => h_flex()
.child(
Label::new(model.name().0)
.size(LabelSize::Small)
Expand All @@ -156,7 +149,9 @@ impl MessageEditor {
.size(IconSize::XSmall),
),
)
.tooltip(move |cx| Tooltip::for_action("Change Model", &ToggleModelSelector, cx)),
.tooltip(move |cx| {
Tooltip::for_action_in("Change Model", &ToggleModelSelector, &focus_handle, cx)
}),
)
}
}
Expand All @@ -170,18 +165,19 @@ impl FocusableView for MessageEditor {
impl Render for MessageEditor {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let font_size = TextSize::Default.rems(cx);
let line_height = font_size.to_pixels(cx.rem_size()) * 1.3;
let line_height = font_size.to_pixels(cx.rem_size()) * 1.5;
let focus_handle = self.editor.focus_handle(cx);
let bg_color = cx.theme().colors().editor_background;

v_flex()
.key_context("MessageEditor")
.on_action(cx.listener(Self::chat))
.size_full()
.gap_2()
.p_2()
.bg(cx.theme().colors().editor_background)
.bg(bg_color)
.child(self.context_strip.clone())
.child({
.child(div().id("thread_editor").overflow_y_scroll().h_12().child({
let settings = ThemeSettings::get_global(cx);
let text_style = TextStyle {
color: cx.theme().colors().editor_foreground,
Expand All @@ -196,17 +192,17 @@ impl Render for MessageEditor {
EditorElement::new(
&self.editor,
EditorStyle {
background: cx.theme().colors().editor_background,
background: bg_color,
local_player: cx.theme().players().local(),
text: text_style,
..Default::default()
},
)
})
}))
.child(
h_flex()
.justify_between()
.child(h_flex().gap_2().child(CheckboxWithLabel::new(
.child(CheckboxWithLabel::new(
"use-tools",
Label::new("Tools"),
self.use_tools.into(),
Expand All @@ -216,10 +212,10 @@ impl Render for MessageEditor {
ToggleState::Unselected | ToggleState::Indeterminate => false,
};
}),
)))
))
.child(
h_flex()
.gap_2()
.gap_1()
.child(self.render_language_model_selector(cx))
.child(
ButtonLike::new("chat")
Expand Down
Loading

0 comments on commit 53c8b48

Please sign in to comment.