Allow appending objects to the ChatMessage header & footer

examples/reference/chat/ChatMessage.ipynb

@@ -45,6 +45,8 @@
  "* **`user`** (str): Name of the user who sent the message.\n",
  "* **`avatar`** (str | BinaryIO): The avatar to use for the user. Can be a single character text, an emoji, or anything supported by `pn.pane.Image`. If not set, uses the first character of the name.\n",
  "* **`default_avatars`** (Dict[str, str | BinaryIO]): A default mapping of user names to their corresponding avatars to use when the user is set but the avatar is not. You can modify, but not replace the dictionary. Note, the keys are *only* alphanumeric sensitive, meaning spaces, special characters, and case sensitivity is disregarded, e.g. `\"Chat-GPT3.5\"`, `\"chatgpt 3.5\"` and `\"Chat GPT 3.5\"` all map to the same value.\n",
+ "* **`footer_objects`** (List): A list of objects to display in the column of the footer of the message.\n",
+ "* **`header_objects`** (List): A list of objects to display in the row of the header of the message.\n",
  "* **`avatar_lookup`** (Callable): A function that can lookup an `avatar` from a user name. The function signature should be `(user: str) -> Avatar`. If this is set, `default_avatars` is disregarded.\n",
  "* **`reactions`** (List): Reactions associated with the message.\n",
  "* **`reaction_icons`** (ChatReactionIcons | dict): A mapping of reactions to their reaction icons; if not provided defaults to `{\"favorite\": \"heart\"}`. Provides a visual representation of reactions.\n",
@@ -178,6 +180,35 @@
  ")"
  ]
  },
+ {
+ "cell_type": "markdown",
+ "metadata": {},
+ "source": [
+ "However, if you're serializing output, it's better practice to put other objects into the `header_objects` or `footer_objects` of the `ChatMessage` so that you don't have to write a custom serializer to handle nested Panel components."
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "pn.Column(\n",
+ " ChatMessage(\n",
+ " \"Yes. I want to hear some beat boxing\", user=\"Music Lover\", avatar=\"🎸\"\n",
+ " ),\n",
+ " ChatMessage(\n",
+ " pn.pane.Audio(\n",
+ " \"https://assets.holoviz.org/panel/samples/beatboxing.mp3\",\n",
+ " ),\n",
+ " header_objects=[pn.pane.HTML(\"Here goes. Hope you like this one?\", margin=(5, 0))],\n",
+ " footer_objects=[pn.widgets.ButtonIcon(icon=\"download\", description=\"Download this! (not implemented here)\")],\n",
+ " user=\"Beat Boxer\",\n",
+ " avatar=\"🎶\",\n",
+ " ),\n",
+ ")"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {},

panel/chat/message.py

@@ -161,6 +161,12 @@ class ChatMessage(PaneBase):
  to use when the user is specified but the avatar is. You can
  modify, but not replace the dictionary.""")
 
+ footer_objects = param.List(doc="""
+ A list of objects to display in the column of the footer of the message.""")
+
+ header_objects = param.List(doc="""
+ A list of objects to display in the row of the header of the message.""")
+
  max_width = param.Integer(default=1200, bounds=(0, None))
 
  object = param.Parameter(allow_refs=False, doc="""
@@ -280,8 +286,10 @@ def _build_layout(self):
  self.param.user, height=20, css_classes=["name"],
  visible=self.param.show_user, stylesheets=self._stylesheets,
  )
+
  header_row = Row(
  self._user_html,
+ *self.param.header_objects.rx(),
  self.chat_copy_icon,
  self._activity_dot,
  stylesheets=self._stylesheets + self.param.stylesheets.rx(),
@@ -295,7 +303,8 @@ def _build_layout(self):
  visible=self.param.show_timestamp
  )
 
- footer_row = Row(
+ footer_col = Column(
+ *self.param.footer_objects.rx(),
  self._timestamp_html,
  stylesheets=self._stylesheets + self.param.stylesheets.rx(),
  sizing_mode="stretch_width",
@@ -305,7 +314,7 @@ def _build_layout(self):
  self._right_col = right_col = Column(
  header_row,
  self._center_row,
- footer_row,
+ footer_col,
  css_classes=["right"],
  stylesheets=self._stylesheets + self.param.stylesheets.rx(),
  sizing_mode=None

panel/dist/css/chat_message.css

@@ -72,7 +72,7 @@
  1px;
  font-size: 1.25em;
  min-height: 50px;
- margin-block: 0px;
+ margin-top: 0px;
  margin-left: 10px; /* Space for avatar */
  margin-right: 5px; /* Space for reaction */
  background-color: var(--panel-surface-color, #f1f1f1);
@@ -88,15 +88,15 @@
 
 .footer {
  display: flex;
- flex-direction: row;
+ flex-direction: column;
  align-items: center;
  justify-content: space-between;
 }
 
 .timestamp {
  color: #a9a9a9;
  display: flex;
- margin-top: 3px;
+ margin-top: 0px;
 }
 
 .markdown {

panel/tests/chat/test_message.py

@@ -15,6 +15,7 @@
 from panel.pane.image import PNG, SVG, Image
 from panel.pane.markup import HTML, DataFrame, Markdown
 from panel.pane.media import Audio
+from panel.param import ParamFunction
 from panel.tests.util import mpl_available, mpl_figure
 from panel.widgets.button import Button
 from panel.widgets.input import (
@@ -28,19 +29,23 @@
 
 class TestChatMessage:
  def test_layout(self):
- message = ChatMessage(object="ABC")
+ message = ChatMessage(object="ABC", header_objects=["Header Test"], footer_objects=["Footer Test"])
  columns = message._composite.objects
  assert len(columns) == 2
 
  avatar_pane = columns[0][0]
  assert isinstance(avatar_pane, HTML)
  assert avatar_pane.object == "🧑"
 
- row = columns[1][0]
- user_pane = row[0]
+ header_row = columns[1][0]
+ user_pane = header_row[0]
  assert isinstance(user_pane, HTML)
  assert user_pane.object == "User"
 
+ header_objects = header_row[1][0]
+ assert isinstance(header_objects, Row)
+ assert isinstance(header_objects.objects[0], ParamFunction)
+
  center_row = columns[1][1]
  assert isinstance(center_row, Row)
 
@@ -51,10 +56,14 @@ def test_layout(self):
  icons = center_row[1]
  assert isinstance(icons, ChatReactionIcons)
 
- footer_row = columns[1][2]
- assert isinstance(footer_row, Row)
+ footer_col = columns[1][2]
+ assert isinstance(footer_col, Column)
+
+ footer_objects = footer_col[0][0]
+ assert isinstance(footer_objects, Row)
+ assert isinstance(footer_objects.objects[0], ParamFunction)
 
- timestamp_pane = footer_row[0]
+ timestamp_pane = footer_col[1]
  assert isinstance(timestamp_pane, HTML)
 
  def test_reactions_link(self):