From 8351d4f5512dfe8ba1ee852435a267a94033153b Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Simonard <pierre.olivier.simonard@gmail.com>
Date: Wed, 7 Feb 2024 14:15:57 +0100
Subject: [PATCH] Fix in holoviz/panel#6304 unlocks styling buttons

---
 ragna/deploy/_ui/central_view.py                | 17 +----------------
 ragna/deploy/_ui/css/chat_interface/button.css  | 10 ++++++++++
 .../deploy/_ui/css/chat_interface/markdown.css  |  4 ++++
 ragna/deploy/_ui/styles.py                      |  7 ++++++-
 4 files changed, 21 insertions(+), 17 deletions(-)
 create mode 100644 ragna/deploy/_ui/css/chat_interface/button.css
 create mode 100644 ragna/deploy/_ui/css/chat_interface/markdown.css

diff --git a/ragna/deploy/_ui/central_view.py b/ragna/deploy/_ui/central_view.py
index dc34d89b..b0739bbb 100644
--- a/ragna/deploy/_ui/central_view.py
+++ b/ragna/deploy/_ui/central_view.py
@@ -161,25 +161,10 @@ def __init__(
         self._stylesheets.extend(message_stylesheets)
 
     def _copy_and_source_view_buttons(self) -> pn.Row:
-        # I have tried to style this button using modifiers, but it doesn't work.
-        # If you inspect the HTML code for this button, none of the CSS files are
-        # added. Leaving this as this is for now.
         source_info_button = pn.widgets.Button(
             name="Source Info",
             icon="info-circle",
-            stylesheets=[
-                """     :host(.solid) .bk-btn.bk-btn-default {
-                                background-color: transparent;
-                                color: gray;
-                            }
-
-                            .bk-btn {
-                                border-radius: 0;
-                                padding: 0;
-                                font-size: 14px;
-                            }
-                    """
-            ],
+            css_classes=["source-info-button"],
             on_click=lambda event: self.on_click_source_info_callback(
                 event, self.sources
             ),
diff --git a/ragna/deploy/_ui/css/chat_interface/button.css b/ragna/deploy/_ui/css/chat_interface/button.css
new file mode 100644
index 00000000..8c8caba1
--- /dev/null
+++ b/ragna/deploy/_ui/css/chat_interface/button.css
@@ -0,0 +1,10 @@
+:host(.source-info-button) .bk-btn.bk-btn-default {
+  background-color: transparent;
+  color: gray;
+}
+
+.bk-btn {
+  border-radius: 0;
+  padding: 0;
+  font-size: 14px;
+}
diff --git a/ragna/deploy/_ui/css/chat_interface/markdown.css b/ragna/deploy/_ui/css/chat_interface/markdown.css
new file mode 100644
index 00000000..e69fac1b
--- /dev/null
+++ b/ragna/deploy/_ui/css/chat_interface/markdown.css
@@ -0,0 +1,4 @@
+:host(.markdown.message-content) table {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
diff --git a/ragna/deploy/_ui/styles.py b/ragna/deploy/_ui/styles.py
index 1930d50a..27a6096d 100644
--- a/ragna/deploy/_ui/styles.py
+++ b/ragna/deploy/_ui/styles.py
@@ -22,11 +22,14 @@ def apply_design_modifiers():
 def add_modifier(
     modifier_class: Type[Any], modifications: Any, property: str = "stylesheets"
 ):
+    # if modifier_class == pn.widgets.button.Button and "chat_interface" in modifications:
+    #    breakpoint()
+
     if modifier_class not in pn.theme.fast.Fast.modifiers:
         pn.theme.fast.Fast.modifiers[modifier_class] = {}
 
     if property not in pn.theme.fast.Fast.modifiers[modifier_class]:
-        pn.theme.fast.Fast.modifiers[modifier_class] = {property: [modifications]}
+        pn.theme.fast.Fast.modifiers[modifier_class][property] = [modifications]
     else:
         pn.theme.fast.Fast.modifiers[modifier_class][property].append(modifications)
 
@@ -74,6 +77,8 @@ def apply_design_modifiers_central_view():
 def apply_design_modifiers_chat_interface():
     add_modifier(pn.widgets.TextInput, "css/chat_interface/textinput.css")
     add_modifier(pn.layout.Card, "css/chat_interface/card.css")
+    add_modifier(pn.pane.Markdown, "css/chat_interface/markdown.css")
+    add_modifier(pn.widgets.button.Button, "css/chat_interface/button.css")
 
 
 """