Delete Chat Modal

src/app.rs

@@ -1,4 +1,5 @@
 use crate::chat::chat_panel::ChatPanelAction;
+use crate::chat::delete_chat_modal::{DeleteChatAction, DeleteChatModalWidgetRefExt};
 use crate::data::downloads::DownloadPendingNotification;
 use crate::data::store::*;
 use crate::landing::model_card::{ModelCardViewAllModalWidgetRefExt, ViewAllModalAction};
@@ -27,6 +28,7 @@ live_design! {
     import crate::chat::chat_screen::ChatScreen;
     import crate::my_models::my_models_screen::MyModelsScreen;
     import crate::my_models::delete_model_modal::DeleteModelModal;
+    import crate::chat::delete_chat_modal::DeleteChatModal;
     import crate::my_models::model_info_modal::ModelInfoModal;
 
 
@@ -116,6 +118,14 @@ live_design! {
                         }
                     }
 
+                    modal_delete_chat_portal_view = <PortalView> {
+                        modal = <Modal> {
+                            content = {
+                                delete_chat_modal = <DeleteChatModal> {}
+                            }
+                        }
+                    }
+
                     modal_model_info_portal_view = <PortalView> {
                         modal = <Modal> {
                             content = {
@@ -250,6 +260,15 @@ impl MatchEvent for App {
                 self.ui.redraw(cx);
             }
 
+            // Set modal viewall model id
+            if let DeleteChatAction::ChatSelected(chat_id) = action.as_widget_action().cast() {
+                let mut modal = self.ui.delete_chat_modal(id!(delete_chat_modal));
+                modal.set_chat_id(chat_id);
+                // TODO: Hack for error that when you first open the modal, doesnt draw until an event
+                // this forces the entire ui to rerender, still weird that only happens the first time.
+                self.ui.redraw(cx);
+            }
+
             if let ModelInfoAction::FileSelected(file_id) = action.as_widget_action().cast() {
                 let mut modal = self.ui.model_info_modal(id!(model_info_modal));
                 modal.set_file_id(file_id);

src/chat/chat_history_card.rs

@@ -1,8 +1,13 @@
-use crate::data::{chats::chat::ChatID, store::Store};
+use crate::{
+    data::{chats::chat::ChatID, store::Store},
+    shared::portal::PortalAction,
+};
 use chrono::{DateTime, Local, NaiveDateTime, TimeZone};
 
 use makepad_widgets::*;
 
+use super::delete_chat_modal::DeleteChatAction;
+
 live_design! {
     import makepad_widgets::base::*;
     import makepad_widgets::theme_desktop_dark::*;
@@ -177,8 +182,16 @@ impl WidgetMatchEvent for ChatHistoryCard {
         let widget_uid = self.widget_uid();
 
         if self.button(id!(delete_chat)).clicked(actions) {
-            store.delete_chat(self.chat_id);
-            self.redraw(cx);
+            cx.widget_action(
+                widget_uid,
+                &scope.path,
+                DeleteChatAction::ChatSelected(self.chat_id),
+            );
+            cx.widget_action(
+                widget_uid,
+                &scope.path,
+                PortalAction::ShowPortalView(live_id!(modal_delete_chat_portal_view)),
+            );
             return;
         }
 

src/chat/delete_chat_modal.rs

@@ -0,0 +1,217 @@
+use makepad_widgets::*;
+
+use crate::{
+    chat::chat_panel::ChatPanelAction,
+    data::{chats::chat::ChatID, store::Store},
+    shared::portal::PortalAction,
+};
+
+live_design! {
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+    import makepad_draw::shader::std::*;
+
+    import crate::shared::styles::*;
+    import crate::shared::widgets::MoxinButton;
+    import crate::shared::resource_imports::*;
+
+    DeleteChatModal = {{DeleteChatModal}} {
+        width: Fit
+        height: Fit
+
+        wrapper = <RoundedView> {
+            flow: Down
+            width: 600
+            height: Fit
+            padding: {top: 44, right: 30 bottom: 30 left: 50}
+            spacing: 10
+
+            show_bg: true
+            draw_bg: {
+                color: #fff
+                radius: 3
+            }
+
+            <View> {
+                width: Fill,
+                height: Fit,
+                flow: Right
+
+                padding: {top: 8, bottom: 20}
+
+                title = <View> {
+                    width: Fit,
+                    height: Fit,
+
+                    <Label> {
+                        text: "Delete Chat"
+                        draw_text: {
+                            text_style: <BOLD_FONT>{font_size: 13},
+                            color: #000
+                        }
+                    }
+                }
+
+                filler_x = <View> {width: Fill, height: Fit}
+
+                close_button = <MoxinButton> {
+                    width: Fit,
+                    height: Fit,
+
+                    margin: {top: -8}
+
+                    draw_icon: {
+                        svg_file: (ICON_CLOSE),
+                        fn get_color(self) -> vec4 {
+                            return #000;
+                        }
+                    }
+                    icon_walk: {width: 12, height: 12}
+                }
+            }
+
+            body = <View> {
+                width: Fill,
+                height: Fit,
+                flow: Down,
+                spacing: 40,
+
+                delete_prompt = <Label> {
+                    width: Fill
+                    draw_text: {
+                        text_style: <REGULAR_FONT>{
+                            font_size: 10,
+                            height_factor: 1.3
+                        },
+                        color: #000
+                        wrap: Word
+                    }
+                }
+
+                actions = <View> {
+                    width: Fill, height: Fit
+                    flow: Right,
+                    align: {x: 1.0, y: 0.5}
+                    spacing: 20
+
+                    cancel_button = <MoxinButton> {
+                        width: Fit,
+                        height: Fit,
+                        padding: {top: 10, bottom: 10, left: 14, right: 14}
+
+                        draw_bg: {
+                            instance radius: 2.0,
+                            border_color: #D0D5DD,
+                            border_width: 1.2,
+                            color: #fff,
+                        }
+
+                        text: "Cancel"
+                        draw_text:{
+                            text_style: <REGULAR_FONT>{font_size: 10},
+                            color: #x0
+                        }
+                    }
+
+                    delete_button = <MoxinButton> {
+                        width: Fit,
+                        height: Fit,
+                        padding: {top: 10, bottom: 10, left: 14, right: 14}
+
+                        draw_bg: {
+                            instance radius: 2.0,
+                            color: #D92D20,
+                        }
+
+                        text: "Delete"
+                        draw_text:{
+                            text_style: <REGULAR_FONT>{font_size: 10},
+                            color: #fff
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[derive(Clone, DefaultNone, Debug)]
+pub enum DeleteChatAction {
+    ChatSelected(ChatID),
+    None,
+}
+
+#[derive(Live, LiveHook, Widget)]
+pub struct DeleteChatModal {
+    #[deref]
+    view: View,
+    #[rust]
+    chat_id: ChatID,
+}
+
+impl Widget for DeleteChatModal {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+        self.widget_match_event(cx, event, scope);
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        let chat_title = scope
+            .data
+            .get::<Store>()
+            .unwrap()
+            .chats
+            .saved_chats
+            .iter()
+            .map(|chat| chat.borrow())
+            .find(|chat| chat.id == self.chat_id)
+            .unwrap()
+            .get_title()
+            .to_string();
+
+        let prompt_text = format!(
+            "Are you sure you want to delete {}?\nThis action cannot be undone.",
+            chat_title
+        );
+        self.label(id!(wrapper.body.delete_prompt))
+            .set_text(&prompt_text);
+
+        self.view
+            .draw_walk(cx, scope, walk.with_abs_pos(DVec2 { x: 0., y: 0. }))
+    }
+}
+
+impl WidgetMatchEvent for DeleteChatModal {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
+        let widget_uid = self.widget_uid();
+
+        if self.button(id!(close_button)).clicked(actions) {
+            cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
+        }
+
+        if self
+            .button(id!(wrapper.body.actions.delete_button))
+            .clicked(actions)
+        {
+            let store = scope.data.get_mut::<Store>().unwrap();
+            store.delete_chat(self.chat_id);
+            cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
+            cx.redraw_all();
+        }
+
+        if self
+            .button(id!(wrapper.body.actions.cancel_button))
+            .clicked(actions)
+        {
+            cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
+        }
+    }
+}
+
+impl DeleteChatModalRef {
+    pub fn set_chat_id(&mut self, chat_id: ChatID) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.chat_id = chat_id;
+        }
+    }
+}

src/chat/mod.rs

@@ -4,6 +4,7 @@ pub mod chat_line;
 pub mod chat_line_loading;
 pub mod chat_panel;
 pub mod chat_screen;
+pub mod delete_chat_modal;
 pub mod model_info;
 pub mod model_selector;
 pub mod model_selector_list;
@@ -22,4 +23,5 @@ pub fn live_design(cx: &mut Cx) {
     model_selector_list::live_design(cx);
     model_selector::live_design(cx);
     shared::live_design(cx);
+    delete_chat_modal::live_design(cx);
 }