Fix in holoviz/panel#6304 unlocks styling buttons

Quansight · Feb 7, 2024 · 8351d4f · 8351d4f
1 parent c4c36b5
commit 8351d4f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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")
 
 
 """