add scroll mode to chatbot from 06 and up

Author: parmentelat

notebooks/tps/chatbot/chatbot-06.py

@@ -52,7 +52,17 @@ class History(ft.Column):
     """
 
     def __init__(self):
-        super().__init__([ft.TextField(label="Type a message...")])
+
+        super().__init__(
+            [ft.TextField(label="Type a message...")],
+            # when we send several prompts the text goes down
+            # so make the column scrollable, and always at the bottom
+            scroll=ft.ScrollMode.AUTO,
+            auto_scroll=True,
+            # see https://stackoverflow.com/questions/77172817/items-not-scrolling-in-flet-gui
+            # required for scroll to work properly
+            expand=True,
+        )
 
     # insert material - prompt or answer - to allow for different styles
     def add_prompt(self, message):
@@ -102,7 +112,11 @@ def __init__(self, page):
         )
         super().__init__(
             [header, row, self.history],
-            horizontal_alignment=ft.CrossAxisAlignment.CENTER)
+            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+            # same as above, the history column needs to know
+            # it is expected to take all the vertical space
+            expand=True,
+        )
 
 
     def submit(self, event):

notebooks/tps/chatbot/chatbot-07.py

@@ -53,12 +53,15 @@ class History(ft.Column):
     # need to pass the app object so we can invoke its submit method
     def __init__(self, app):
         self.app = app
-        super().__init__([
-            ft.TextField(
+        super().__init__(
+            [ft.TextField(
                 label="Type a message...",
                 on_submit=lambda event: self.app.submit(event),
-            )
-        ])
+            )],
+            scroll=ft.ScrollMode.AUTO,
+            auto_scroll=True,
+            expand=True,
+        )
 
     # insert material - prompt or answer - to allow for different styles
     def add_prompt(self, message):
@@ -110,7 +113,9 @@ def __init__(self, page):
         )
         super().__init__(
             [header, row, self.history],
-            horizontal_alignment=ft.CrossAxisAlignment.CENTER)
+            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+            expand=True,
+        )
         # a local attribute to prevent multiple submissions
         self.disabled = False
 

notebooks/tps/chatbot/chatbot-08.py

@@ -51,12 +51,15 @@ class History(ft.Column):
     # need to pass the app object so we can invoke its submit method
     def __init__(self, app):
         self.app = app
-        super().__init__([
-            ft.TextField(
+        super().__init__(
+            [ft.TextField(
                 label="Type a message...",
                 on_submit=lambda event: self.app.submit(event),
-            )
-        ])
+            )],
+            scroll=ft.ScrollMode.AUTO,
+            auto_scroll=True,
+            expand=True,
+        )
 
     # insert material - prompt or answer - to allow for different styles
     def add_prompt(self, message):
@@ -108,7 +111,9 @@ def __init__(self, page):
         )
         super().__init__(
             [header, row, self.history],
-            horizontal_alignment=ft.CrossAxisAlignment.CENTER)
+            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+            expand=True,
+        )
         # a local attribute to prevent multiple submissions
         self.disabled = False
 

notebooks/tps/chatbot/chatbot-09.py

@@ -53,13 +53,16 @@ class History(ft.Column):
 
     def __init__(self, app):
         self.app = app
-        super().__init__([
-            ft.TextField(
+        super().__init__(
+            [ft.TextField(
                 label="Type a message...",
                 on_submit=lambda event: self.app.submit(event),
                 fill_color="lightgrey",
+            )],
+            scroll=ft.ScrollMode.AUTO,
+            auto_scroll=True,
+            expand=True,
             )
-        ])
 
     # insert material - prompt or answer - to allow for different styles
     def add_prompt(self, message):
@@ -113,7 +116,9 @@ def __init__(self, page):
         )
         super().__init__(
             [header, row, self.history],
-            horizontal_alignment=ft.CrossAxisAlignment.CENTER)
+            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+            expand=True,
+        )
         # a local attribute to prevent multiple submissions
         self.disabled = False
 

notebooks/tps/chatbot/chatbot-10.py

@@ -46,13 +46,16 @@ class History(ft.Column):
 
     def __init__(self, app):
         self.app = app
-        super().__init__([
-            ft.TextField(
+        super().__init__(
+            [ft.TextField(
                 label="Type a message...",
                 on_submit=lambda event: self.app.submit(event),
                 fill_color="lightgrey",
+            )],
+            scroll=ft.ScrollMode.AUTO,
+            auto_scroll=True,
+            expand=True,
             )
-        ])
 
     # insert material - prompt or answer - to allow for different styles
     def add_prompt(self, message):
@@ -107,7 +110,10 @@ def __init__(self, page):
         )
         super().__init__(
             [header, row, self.history],
-            horizontal_alignment=ft.CrossAxisAlignment.CENTER)
+            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+            expand=True,
+        )
+        # xxx somehow I need to move this here because after __init__ self.page is .. None !?!
         self.page = page
         # a local attribute to prevent multiple submissions
         self.disabled = False