Improved UI Design

Jesewe · Jul 12, 2024 · 5bfd88f · 5bfd88f
1 parent 9c72c15
commit 5bfd88f
Showing 1 changed file with 50 additions and 24 deletions.
diff --git a/main.py b/main.py
@@ -29,35 +29,34 @@ def __init__(self, page: ft.Page):
         self.messages_container = ft.ListView(expand=True, spacing=10, padding=10, auto_scroll=True)
         self.chat_history = []
 
-        self.selected_model = ft.Dropdown(
-            width=200,
-            options=[ft.dropdown.Option(model) for model in MODELS],
-            value=self.config.get("model", "gpt-4-turbo"),
-            on_change=self.change_model
-        )
-
-        self.selected_theme = ft.Dropdown(
-            width=200,
-            options=[ft.dropdown.Option(theme) for theme in THEMES],
-            value=self.config.get("theme", "Dark"),
-            on_change=self.change_theme
-        )
+        self.selected_model = self.create_dropdown(MODELS, self.config.get("model", "gpt-4-turbo"), self.change_model)
+        self.selected_theme = self.create_dropdown(list(THEMES.keys()), self.config.get("theme", "Dark"), self.change_theme)
 
         self.user_input = ft.TextField(hint_text="Enter your message", expand=True)
-        self.send_button = ft.ElevatedButton(text="Send", on_click=self.send_message)
-        self.clear_button = ft.ElevatedButton(text="Clear History", on_click=self.clear_history)
-        self.settings_button = ft.ElevatedButton(text="Settings", on_click=self.open_settings)
+        self.send_button = ft.ElevatedButton(text="Send", icon=ft.icons.SEND, on_click=self.send_message)
+        self.clear_button = ft.ElevatedButton(text="Clear History", icon=ft.icons.DELETE, on_click=self.clear_history)
+        self.settings_button = ft.IconButton(icon=ft.icons.SETTINGS, on_click=self.open_settings)
 
         self.settings_dialog = self.create_settings_dialog()
 
+        self.setup_ui()
+
+    def setup_ui(self):
         self.page.add(
             ft.Column(
                 [
                     ft.Row(
                         [
                             ft.Column(
                                 [
-                                    ft.Text("ChatGPT Application", style="headlineMedium", color=ft.colors.CYAN),
+                                    ft.Row(
+                                        [
+                                            ft.Icon(name=ft.icons.CHAT, color=ft.colors.CYAN, size=40),
+                                            ft.Text("ChatGPT Application", style="headlineMedium", color=ft.colors.CYAN),
+                                        ],
+                                        spacing=10,
+                                        vertical_alignment=ft.CrossAxisAlignment.CENTER
+                                    ),
                                     ft.Text("Author: ItsJesewe", style="bodyMedium", color=ft.colors.GREY)
                                 ]
                             ),
@@ -66,7 +65,9 @@ def __init__(self, page: ft.Page):
                         ],
                         alignment=ft.MainAxisAlignment.SPACE_BETWEEN
                     ),
+                    ft.Divider(color=ft.colors.GREY),
                     self.messages_container,
+                    ft.Divider(color=ft.colors.GREY),
                     ft.Row([self.user_input, self.send_button, self.clear_button], spacing=10)
                 ],
                 spacing=20,
@@ -88,6 +89,14 @@ def save_config(self):
     def get_text_color(self):
         return ft.colors.WHITE if self.page.theme_mode == ft.ThemeMode.DARK else ft.colors.BLACK
 
+    def create_dropdown(self, options, default_value, on_change):
+        return ft.Dropdown(
+            width=200,
+            options=[ft.dropdown.Option(option) for option in options],
+            value=default_value,
+            on_change=on_change
+        )
+
     def change_theme(self, e: ft.ControlEvent):
         selected_theme_value = e.control.value
         self.page.theme_mode = THEMES[selected_theme_value]
@@ -115,7 +124,7 @@ def send_message(self, e: ft.ControlEvent):
             self.page.update()
 
             bot_message = self.get_bot_response(model, user_message)
-            self.add_message("ChatGPT", bot_message, ft.colors.LIGHT_BLUE)
+            self.add_message("ChatGPT", bot_message, ft.colors.LIGHT_BLUE, copy_button=True)
             self.user_input.focus()
 
     def get_bot_response(self, model, user_message):
@@ -126,13 +135,22 @@ def get_bot_response(self, model, user_message):
             )
             return response.choices[0].message.content
         except Exception as ex:
-            return f"Error: {ex}"
-
-    def add_message(self, sender: str, message: str, color: str):
-        self.messages_container.controls.append(ft.Text(f"{sender}: {message}", color=color))
+            return f"Error: Unable to get response from ChatGPT ({ex})"
+
+    def add_message(self, sender: str, message: str, color: str, copy_button: bool = False):
+        message_control = ft.Text(f"{sender}: {message}", color=color)
+        controls = [message_control]
+        if copy_button:
+            copy_button_control = ft.IconButton(icon=ft.icons.COPY, on_click=lambda e: self.copy_to_clipboard(message))
+            controls.append(copy_button_control)
+        self.messages_container.controls.append(ft.Row(controls, alignment=ft.MainAxisAlignment.SPACE_BETWEEN))
         self.chat_history.append((sender, message))
         self.page.update()
 
+    def copy_to_clipboard(self, message: str):
+        self.page.set_clipboard(message)
+        self.page.show_snack_bar(ft.SnackBar(content=ft.Text("Text copied to clipboard!")))
+
     def clear_history(self, e: ft.ControlEvent):
         self.messages_container.controls.clear()
         self.chat_history.clear()
@@ -150,7 +168,14 @@ def close_settings(self, e: ft.ControlEvent):
     def create_settings_dialog(self):
         return ft.AlertDialog(
             modal=True,
-            title=ft.Text("Settings"),
+            title=ft.Row(
+                [
+                    ft.Icon(name=ft.icons.SETTINGS, color=ft.colors.GREY, size=30),
+                    ft.Text("Settings", style="headlineMedium", color=ft.colors.GREY),
+                ],
+                spacing=10,
+                vertical_alignment=ft.CrossAxisAlignment.CENTER
+            ),
             content=ft.Column(
                 [
                     ft.Text("Choose Theme:", style="bodyMedium", color=ft.colors.GREY),
@@ -162,7 +187,8 @@ def create_settings_dialog(self):
             ),
             actions=[
                 ft.TextButton("Close", on_click=self.close_settings)
-            ]
+            ],
+            actions_alignment=ft.MainAxisAlignment.END
         )
 
 def main(page: ft.Page):