custome input

crates/chat_ui/Cargo.toml

@@ -7,6 +7,7 @@ publish.workspace = true
 [dependencies]
 state = { path = "../state" }
 ui = { path = "../ui" }
+input = { path = "../input" }
 theme = { path = "../theme" }
 common = { path = "../common" }
 person = { path = "../person" }

crates/chat_ui/src/lib.rs

@@ -13,6 +13,7 @@ use gpui::{
     StatefulInteractiveElement, Styled, StyledImage, Subscription, Task, WeakEntity, Window,
     deferred, div, img, list, px, red, relative, svg, white,
 };
+use input::{Input, InputState, InputStateEvent, input};
 use itertools::Itertools;
 use nostr_sdk::prelude::*;
 use person::{Person, PersonRegistry};
@@ -24,7 +25,6 @@ use theme::ActiveTheme;
 use ui::avatar::Avatar;
 use ui::button::{Button, ButtonVariants};
 use ui::dock::{Panel, PanelEvent};
-use ui::input::{InputEvent, InputState, TextInput};
 use ui::menu::DropdownMenu;
 use ui::notification::Notification;
 use ui::scroll::Scrollbar;
@@ -116,15 +116,17 @@ impl ChatPanel {
 
         // Define input state
         let input = cx.new(|cx| {
-            InputState::new(window, cx)
-                .placeholder(format!("Message {}", name))
-                .auto_grow(1, 20)
-                .prevent_new_line_on_enter()
-                .clean_on_escape()
+            let mut this = InputState::new_multiline(cx);
+            this.set_placeholder(format!("Message {}", name), cx);
+            this
         });
 
         // Define subject input state
-        let subject_input = cx.new(|cx| InputState::new(window, cx).placeholder("New subject..."));
+        let subject_input = cx.new(|cx| {
+            let mut this = InputState::new(cx);
+            this.set_placeholder("New subject...", cx);
+            this
+        });
         let subject_bar = cx.new(|_cx| false);
 
         // Define subscriptions
@@ -133,7 +135,7 @@ impl ChatPanel {
         subscriptions.push(
             // Subscribe the chat input event
             cx.subscribe_in(&input, window, move |this, _input, event, window, cx| {
-                if let InputEvent::PressEnter { .. } = event {
+                if let InputStateEvent::Enter = event {
                     this.send_text_message(window, cx);
                 };
             }),
@@ -145,7 +147,7 @@ impl ChatPanel {
                 &subject_input,
                 window,
                 move |this, _input, event, window, cx| {
-                    if let InputEvent::PressEnter { .. } = event {
+                    if let InputStateEvent::Enter = event {
                         this.change_subject(window, cx);
                     };
                 },
@@ -294,7 +296,7 @@ impl ChatPanel {
     /// Get user input content and merged all attachments if available
     fn get_input_value(&self, cx: &Context<Self>) -> String {
         // Get input's value
-        let mut content = self.input.read(cx).value().trim().to_string();
+        let mut content = self.input.read(cx).content().trim().to_string();
 
         // Get all attaches and merge its with message
         let attachments = self.attachments.read(cx);
@@ -317,7 +319,7 @@ impl ChatPanel {
     }
 
     fn change_subject(&mut self, _window: &mut Window, cx: &mut Context<Self>) {
-        let subject = self.subject_input.read(cx).value();
+        let subject = self.subject_input.read(cx).content().to_string();
 
         self.room
             .update(cx, |this, cx| {
@@ -414,9 +416,9 @@ impl ChatPanel {
     /// Clear the input field, attachments, and replies
     ///
     /// Only run after sending a message
-    fn clear(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+    fn clear(&mut self, _window: &mut Window, cx: &mut Context<Self>) {
         self.input.update(cx, |this, cx| {
-            this.set_value("", window, cx);
+            this.set_content("", cx);
         });
         self.attachments.update(cx, |this, cx| {
             this.clear();
@@ -1497,12 +1499,7 @@ impl Render for ChatPanel {
                         .gap_2()
                         .border_b_1()
                         .border_color(cx.theme().border)
-                        .child(
-                            TextInput::new(&self.subject_input)
-                                .text_sm()
-                                .small()
-                                .bordered(false),
-                        )
+                        .child(input(&self.subject_input, cx).text_sm())
                         .child(
                             Button::new("change")
                                 .icon(IconName::CheckCircle)
@@ -1553,12 +1550,7 @@ impl Render for ChatPanel {
                                         this.upload(window, cx);
                                     })),
                             )
-                            .child(
-                                TextInput::new(&self.input)
-                                    .appearance(false)
-                                    .text_sm()
-                                    .flex_1(),
-                            )
+                            .child(input(&self.input, cx).text_sm().flex_1())
                             .child(
                                 h_flex()
                                     .pl_1()