Remove divider fix layout

panel/chat/icon.py

@@ -6,6 +6,7 @@
 
 import param
 
+from .._param import Margin
 from ..io.resources import CDN_DIST
 from ..layout import Column, Panel
 from ..reactive import ReactiveHTML
@@ -41,6 +42,11 @@ class ChatReactionIcons(CompositeWidget):
 
     css_classes = param.List(default=["reaction-icons"], doc="The CSS classes of the widget.")
 
+    margin = Margin(default=0, doc="""
+        Allows to create additional space around the component. May
+        be specified as a two-tuple of the form (vertical, horizontal)
+        or a four-tuple (top, right, bottom, left).""")
+
     options = param.Dict(default={"favorite": "heart"}, doc="""
         A key-value pair of reaction values and their corresponding tabler icon names
         found on https://tabler-icons.io.""")

panel/chat/message.py

@@ -266,8 +266,6 @@ def __init__(self, object=None, **params):
         self._build_layout()
 
     def _build_layout(self):
-        self._icon_divider = HTML(" | ", width=1, css_classes=["divider"])
-
         self._left_col = left_col = Column(
             self._render_avatar(),
             max_width=60,
@@ -334,7 +332,6 @@ def _build_layout(self):
 
         self._icons_row = Row(
             self.chat_copy_icon,
-            self._icon_divider,
             self._render_reaction_icons(),
             css_classes=["icons"],
             sizing_mode="stretch_width",
@@ -558,11 +555,6 @@ def _render_reaction_icons(self):
 
     def _update_reaction_icons(self, _):
         self._icons_row[-1] = self._render_reaction_icons()
-        self._icon_divider.visible = (
-            len(self.reaction_icons.options) > 0 and
-            self.show_reaction_icons and
-            self.chat_copy_icon.visible
-        )
 
     def _update(self, ref, old_models):
         """
@@ -605,14 +597,9 @@ def _update_chat_copy_icon(self):
         if isinstance(object_panel, str) and self.show_copy_icon:
             self.chat_copy_icon.value = object_panel
             self.chat_copy_icon.visible = True
-            self._icon_divider.visible = (
-                len(self.reaction_icons.options) > 0 and
-                self.show_reaction_icons
-            )
         else:
             self.chat_copy_icon.value = ""
             self.chat_copy_icon.visible = False
-            self._icon_divider.visible = False
 
     def _cleanup(self, root=None) -> None:
         """

panel/dist/css/chat_copy_icon.css

@@ -1,3 +1,3 @@
 :host {
-  margin-top: 8px;
+  margin-top: 4px;
 }

panel/dist/css/chat_message.css

@@ -147,12 +147,6 @@
   line-height: 0.9em;
 }
 
-.divider {
-  margin-right: 0px;
-  margin-top: 2px;
-  opacity: 0.2;
-}
-
 .copy-icon {
   margin-left: 10px;
 }

panel/dist/css/chat_reaction_icons.css

@@ -1,4 +1,5 @@
 :host {
-  margin-top: 4px;
   width: fit-content;
+  margin-top: 2px;
+  margin-left: 3px;
 }

panel/tests/chat/test_message.py

@@ -54,7 +54,7 @@ def test_layout(self):
         assert isinstance(object_pane, Markdown)
         assert object_pane.object == "ABC"
 
-        icons = columns[1][4][2]
+        icons = columns[1][4][1]
         assert isinstance(icons, ChatReactionIcons)
 
         footer_col = columns[1][3]
@@ -81,13 +81,10 @@ def test_reaction_icons_dynamic(self):
 
         message.reaction_icons = ChatReactionIcons(options={"like": "thumb-up"})
         assert message._icons_row[-1] == message.reaction_icons
-        assert message._icon_divider.visible
 
         message.reaction_icons = ChatReactionIcons(options={})
-        assert not message._icon_divider.visible
 
         message = ChatMessage("hi", reaction_icons={})
-        assert not message._icon_divider.visible
 
     def test_reactions_link(self):
         # on init
@@ -329,20 +326,17 @@ def test_chat_copy_icon_text_widget(self, widget):
         message = ChatMessage(object=widget(value="testing"))
         assert message.chat_copy_icon.visible
         assert message.chat_copy_icon.value == "testing"
-        assert message._icon_divider.visible
 
     def test_chat_copy_icon_disabled(self):
         message = ChatMessage(object="testing", show_copy_icon=False)
         assert not message.chat_copy_icon.visible
         assert not message.chat_copy_icon.value
-        assert not message._icon_divider.visible
 
     @pytest.mark.parametrize("component", [Column, FileInput])
     def test_chat_copy_icon_not_string(self, component):
         message = ChatMessage(object=component())
         assert not message.chat_copy_icon.visible
         assert not message.chat_copy_icon.value
-        assert not message._icon_divider.visible
 
     def test_serialize_text_prefix_with_viewable_type(self):
         message = ChatMessage(Markdown("string"))