fix scrollbar

src/chat.rs

@@ -7,6 +7,7 @@ pub struct Chat {
     messages: Vec<Message>,
     pub vertical_scrollbar_state: ScrollbarState,
     pub vertical_scroll: usize,
+    vertical_scrollbar_content_length: usize,
     sqlite: SqlitePool,
 }
 
@@ -16,12 +17,16 @@ impl Chat {
             messages: vec![],
             vertical_scrollbar_state: Default::default(),
             vertical_scroll: Default::default(),
+            vertical_scrollbar_content_length: Default::default(),
             sqlite,
         }
     }
 
     pub fn reset(&mut self) {
         self.messages = vec![];
+        self.vertical_scroll = 0;
+        self.vertical_scrollbar_state =
+            self.vertical_scrollbar_state.position(self.vertical_scroll);
     }
 
     pub fn push(&mut self, message: Message) {
@@ -45,8 +50,8 @@ impl Chat {
     pub fn down(&mut self) {
         self.vertical_scroll = {
             let next_position = self.vertical_scroll.saturating_add(1);
-            if next_position > self.messages.len() {
-                self.messages.len()
+            if next_position > self.vertical_scrollbar_content_length {
+                self.vertical_scrollbar_content_length
             } else {
                 next_position
             }
@@ -56,6 +61,8 @@ impl Chat {
     }
 
     pub async fn load_messages(&mut self, conversation_id: u32) -> AppResult<()> {
+        self.reset();
+
         let messages = db::get_messages(self.sqlite.clone(), conversation_id).await?;
         self.messages = messages;
 
@@ -76,16 +83,31 @@ impl Chat {
         List::new(items)
     }
 
-    pub fn as_paragraph<F>(&mut self, f: F) -> Paragraph<'static>
+    pub fn as_paragraph<F>(&mut self, f: F, area_height: usize) -> Paragraph<'static>
     where
         F: Fn(&Message) -> String,
     {
-        let text = self.messages.iter().map(&f).collect::<Vec<_>>().join("\n");
+        let text = self.messages.iter().map(f).collect::<Vec<_>>().join("\n");
+
+        self.vertical_scrollbar_content_length =
+            calculate_vertical_scrollbar_content_length(&text, area_height);
 
         self.vertical_scrollbar_state = self
             .vertical_scrollbar_state
-            .content_length(self.messages.len());
+            .content_length(self.vertical_scrollbar_content_length);
 
         Paragraph::new(text)
     }
 }
+
+fn calculate_vertical_scrollbar_content_length(text: &str, area_height: usize) -> usize {
+    let lines_of_text = text.lines().collect::<Vec<_>>().len();
+    // area has a border which takes 2 additional lines
+    let area_height = area_height - 2;
+
+    if lines_of_text > area_height {
+        (lines_of_text - area_height) + 2
+    } else {
+        0
+    }
+}

src/ui.rs

@@ -55,19 +55,22 @@ pub fn render(app: &mut App, frame: &mut Frame) {
 
     let messages = app
         .chat
-        .as_paragraph(|message| {
-            let width =
-                messages_layout[0].width - (message_padding.left + message_padding.right) * 2;
-            let icon = match message.role {
-                Role::Assistant => "🤖",
-                Role::System => "🧰",
-                Role::User => "👤",
-            };
-            let content =
-                textwrap::wrap(message.content.trim(), Options::new(width as usize)).join("\n");
+        .as_paragraph(
+            |message| {
+                let width =
+                    messages_layout[0].width - (message_padding.left + message_padding.right) * 2;
+                let icon = match message.role {
+                    Role::Assistant => "🤖",
+                    Role::System => "🧰",
+                    Role::User => "👤",
+                };
+                let content =
+                    textwrap::wrap(message.content.trim(), Options::new(width as usize)).join("\n");
 
-            format!("{icon} {content}")
-        })
+                format!("{icon} {content}")
+            },
+            messages_layout[0].height as usize,
+        )
         .block(
             Block::bordered()
                 .title("CHAT")