Fix chat reaction icons value events + justify-content (#6086)

panel/chat/icon.py

@@ -82,12 +82,14 @@ def _update_active_icons(self):
  icon.active_icon = self.active_icons.get(option, "")
 
  def _update_value(self, event):
- icon = event.obj.name
- value = event.new
- if value and icon not in self.value:
- self.value.append(icon)
- elif not value and icon in self.value:
- self.value.remove(icon)
+ reaction = event.obj.name
+ icon_value = event.new
+ reactions = self.value.copy()
+ if icon_value and reaction not in self.value:
+ reactions.append(reaction)
+ elif not icon_value and reaction in self.value:
+ reactions.remove(reaction)
+ self.value = reactions
 
 
 class ChatCopyIcon(ReactiveHTML):

panel/dist/css/chat_message.css

@@ -103,7 +103,6 @@
  display: flex;
  flex-direction: column;
  align-items: start;
- justify-content: end;
  width: fit-content;
  margin-block: 0px;
  margin-inline: 2px;

panel/tests/ui/chat/test_chat_reaction_icon.py

@@ -0,0 +1,27 @@
+import pytest
+
+pytest.importorskip("playwright")
+
+
+from panel.chat import ChatReactionIcons
+from panel.tests.util import serve_component, wait_until
+
+pytestmark = pytest.mark.ui
+
+
+def test_toggle_icon_click(page):
+ icons = ChatReactionIcons(options={"like": "thumb-up", "dislike": "thumb-down"}, value=["dislike"])
+ serve_component(page, icons)
+
+ assert icons.value == ["dislike"]
+ page.locator(".ti-thumb-up").click()
+ wait_until(lambda: icons.value == ["dislike", "like"], page)
+
+ page.locator(".ti-thumb-down-filled").click()
+ wait_until(lambda: icons.value == ["like"], page)
+
+ page.locator(".ti-thumb-up-filled").click()
+ wait_until(lambda: icons.value == [], page)
+
+ page.locator(".ti-thumb-up").click()
+ wait_until(lambda: icons.value == ["like"], page)