Improved chat view and message bar (#33)

* added style.css and style-dark.css

* keep message text view sensitive at all times

* improved chat view ui and message view

* added clamps for chat container and message
This commit is contained in:
Nokse22 2024-05-24 01:41:52 +02:00 committed by GitHub
parent cde081acb5
commit 5b92186930
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 99 additions and 63 deletions

View File

@ -1,6 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<gresources> <gresources>
<gresource prefix="/com/jeffser/Alpaca"> <gresource prefix="/com/jeffser/Alpaca">
<file>style.css</file>
<file>style-dark.css</file>
<file preprocess="xml-stripblanks">window.ui</file> <file preprocess="xml-stripblanks">window.ui</file>
<file preprocess="xml-stripblanks">gtk/help-overlay.ui</file> <file preprocess="xml-stripblanks">gtk/help-overlay.ui</file>
</gresource> </gresource>

7
src/style-dark.css Normal file
View File

@ -0,0 +1,7 @@
.message-input {
background-color: #343434;
}
.message-text-view {
background-color: #343434;
}

8
src/style.css Normal file
View File

@ -0,0 +1,8 @@
.message-input {
background-color: #EBEBEB;
border-radius: 10px;
}
.message-text-view {
background-color: #EBEBEB;
}

View File

@ -381,7 +381,7 @@ class AlpacaWindow(Adw.ApplicationWindow):
GLib.idle_add(self.image_button.set_css_classes, []) GLib.idle_add(self.image_button.set_css_classes, [])
GLib.idle_add(self.image_button.get_child().set_icon_name, "image-x-generic-symbolic") GLib.idle_add(self.image_button.get_child().set_icon_name, "image-x-generic-symbolic")
self.attached_image = {"path": None, "base64": None} self.attached_image = {"path": None, "base64": None}
GLib.idle_add(self.message_text_view.set_sensitive, True) # GLib.idle_add(self.message_text_view.set_sensitive, True)
if response['status'] == 'error': if response['status'] == 'error':
GLib.idle_add(self.show_toast, 'error', 1, self.connection_overlay) GLib.idle_add(self.show_toast, 'error', 1, self.connection_overlay)
GLib.idle_add(self.connection_error) GLib.idle_add(self.connection_error)
@ -397,7 +397,7 @@ class AlpacaWindow(Adw.ApplicationWindow):
self.add_chat_button.set_sensitive(True) self.add_chat_button.set_sensitive(True)
self.export_chat_button.set_sensitive(True) self.export_chat_button.set_sensitive(True)
self.import_chat_button.set_sensitive(True) self.import_chat_button.set_sensitive(True)
self.message_text_view.set_sensitive(True) # self.message_text_view.set_sensitive(True)
self.send_button.set_css_classes(["suggested-action"]) self.send_button.set_css_classes(["suggested-action"])
self.send_button.get_child().set_label("Send") self.send_button.get_child().set_label("Send")
self.send_button.get_child().set_icon_name("send-to-symbolic") self.send_button.get_child().set_icon_name("send-to-symbolic")
@ -423,7 +423,7 @@ class AlpacaWindow(Adw.ApplicationWindow):
} }
if self.verify_if_image_can_be_used() and self.attached_image["base64"] is not None: if self.verify_if_image_can_be_used() and self.attached_image["base64"] is not None:
data["messages"][-1]["images"] = [self.attached_image["base64"]] data["messages"][-1]["images"] = [self.attached_image["base64"]]
self.message_text_view.set_sensitive(False) # self.message_text_view.set_sensitive(False)
self.send_button.set_css_classes(["destructive-action"]) self.send_button.set_css_classes(["destructive-action"])
self.send_button.get_child().set_label("Stop") self.send_button.get_child().set_label("Stop")
self.send_button.get_child().set_icon_name("edit-delete-symbolic") self.send_button.get_child().set_icon_name("edit-delete-symbolic")

View File

@ -158,86 +158,104 @@
<property name="content"> <property name="content">
<object class="GtkBox"><!--ACTUAL CONTENT--> <object class="GtkBox"><!--ACTUAL CONTENT-->
<property name="orientation">1</property> <property name="orientation">1</property>
<property name="margin-start">24</property>
<property name="margin-end">24</property>
<property name="margin-bottom">24</property>
<property name="vexpand">true</property> <property name="vexpand">true</property>
<property name="hexpand">true</property> <property name="hexpand">true</property>
<child> <child>
<object class="GtkScrolledWindow" id="chat_window"> <object class="GtkScrolledWindow" id="chat_window">
<property name="margin-bottom">12</property>
<property name="propagate-natural-height">true</property> <property name="propagate-natural-height">true</property>
<property name="kinetic-scrolling">true</property> <property name="kinetic-scrolling">true</property>
<property name="vexpand">true</property> <property name="vexpand">true</property>
<style>
<class name="undershoot-bottom"/>
</style>
<child> <child>
<object class="GtkBox" id="chat_container"> <object class="AdwClamp">
<property name="orientation">1</property> <property name="maximum-size">1000</property>
<property name="homogeneous">false</property> <property name="tightening-threshold">800</property>
<property name="hexpand">true</property>
<property name="vexpand">true</property>
<property name="spacing">12</property>
<property name="margin-top">12</property>
<property name="margin-bottom">12</property>
<property name="margin-start">12</property>
<property name="margin-end">12</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkBox">
<property name="orientation">0</property>
<property name="spacing">12</property>
<child>
<object class="GtkScrolledWindow">
<property name="has-frame">true</property>
<style>
<class name="card"/>
<class name="view"/>
</style>
<child> <child>
<object class="GtkTextView" id="message_text_view"> <object class="GtkBox" id="chat_container">
<property name="wrap-mode">word</property> <property name="orientation">1</property>
<property name="homogeneous">false</property>
<property name="hexpand">true</property>
<property name="vexpand">true</property>
<property name="spacing">12</property>
<property name="margin-top">12</property> <property name="margin-top">12</property>
<property name="margin-bottom">12</property> <property name="margin-bottom">12</property>
<property name="margin-start">12</property> <property name="margin-start">12</property>
<property name="margin-end">12</property> <property name="margin-end">12</property>
<property name="hexpand">true</property>
<style>
<class name="view"/>
</style>
</object> </object>
</child> </child>
</object> </object>
</child> </child>
<child> </object>
<object class="GtkBox"> </child>
<property name="orientation">1</property>
<property name="spacing">12</property> <child>
<child> <object class="AdwClamp">
<object class="GtkButton" id="send_button"> <property name="maximum-size">1000</property>
<style> <property name="tightening-threshold">800</property>
<class name="suggested-action"/> <child>
</style> <object class="GtkBox">
<child> <property name="orientation">0</property>
<object class="AdwButtonContent"> <property name="spacing">12</property>
<property name="label" translatable="yes">Send</property> <property name="margin-top">12</property>
<property name="icon-name">send-to-symbolic</property> <property name="margin-bottom">12</property>
</object> <property name="margin-start">12</property>
</child> <property name="margin-end">12</property>
</object> <child>
<object class="GtkBox">
<style>
<class name="message-input"/>
</style>
<child>
<object class="GtkScrolledWindow">
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<child>
<object class="GtkTextView" id="message_text_view">
<property name="wrap-mode">word</property>
<property name="top-margin">6</property>
<property name="bottom-margin">6</property>
<property name="margin-end">12</property>
<property name="hexpand">true</property>
<style>
<class name="message-text-view"/>
</style>
</object>
</child>
</object>
</child>
</object>
</child> </child>
<child> <child>
<object class="GtkButton" id="image_button"> <object class="GtkBox">
<property name="sensitive">false</property> <property name="orientation">1</property>
<property name="tooltip-text" translatable="yes">Requires model 'llava' to be selected</property> <property name="spacing">12</property>
<child> <child>
<object class="AdwButtonContent"> <object class="GtkButton" id="send_button">
<property name="label" translatable="yes">Image</property> <style>
<property name="icon-name">image-x-generic-symbolic</property> <class name="suggested-action"/>
</style>
<child>
<object class="AdwButtonContent">
<property name="label" translatable="yes">Send</property>
<property name="icon-name">send-to-symbolic</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkButton" id="image_button">
<property name="sensitive">false</property>
<property name="tooltip-text" translatable="yes">Requires model 'llava' to be selected</property>
<child>
<object class="AdwButtonContent">
<property name="label" translatable="yes">Image</property>
<property name="icon-name">image-x-generic-symbolic</property>
</object>
</child>
</object> </object>
</child> </child>
</object> </object>
@ -247,6 +265,7 @@
</object> </object>
</child> </child>
</object><!--END OF CONTENT--> </object><!--END OF CONTENT-->
</property> </property>
</object> </object>