Add dark_theme, sx and theme_config params to ChatFeed / ChatInterface (#635)

Author: philippjfr

src/panel_material_ui/chat/feed.py

@@ -1,10 +1,15 @@
+import param
 from panel.chat.feed import ChatFeed as _PnChatFeed
+from panel.config import config
 from panel.layout import Column
 
 from ..layout import Card, Feed
+from ..theme import MaterialDesign
 from .message import ChatMessage
 from .step import ChatStep
 
+CARD_SX = {".MuiCollapse-vertical > .MuiCardContent-root": {"p": 0, "pb": 0}}
+
 
 class ChatFeed(_PnChatFeed):
     """
@@ -32,14 +37,37 @@ class ChatFeed(_PnChatFeed):
     >>> chat_feed = ChatFeed(callback=say_welcome, header="Welcome Feed")
     >>> chat_feed.send("Hello World!", user="New User", avatar="😊")
     """
+    dark_theme = param.Boolean(doc="""
+        Whether to use dark theme. If not specified, will default to Panel's
+        global theme setting.""")
+
+
+    theme_config = param.Dict(default=None, nested_refs=True, doc="""
+        Options to configure the ThemeProvider.
+        See https://mui.com/material-ui/customization/theme-overview/ for more information.""")
+
+    sx = param.Dict(default=None, doc="""
+        A dictionary of CSS styles to apply to the component.
+        The keys are the CSS class names and the values are the styles.
+        The CSS class names are generated by the component and can be found
+        in the component's documentation.""")
+
     _card_type = Card
     _feed_type = Feed
     _message_type = ChatMessage
     _step_type = ChatStep
 
     def __init__(self, *objects, **params):
+        if 'dark_theme' not in params:
+            params['dark_theme'] = config.theme == 'dark'
+        if 'design' not in params:
+            params['design'] = MaterialDesign
         super().__init__(*objects, **params)
-        self._card.sx = {".MuiCollapse-vertical > .MuiCardContent-root": {"p": 0, "pb": 0}}
+        self._card.param.update(
+            dark_theme=self.param.dark_theme,
+            sx=self.param.sx.rx.pipe(lambda v: dict(CARD_SX, **v) if v else CARD_SX),
+            theme_config=self.param.theme_config,
+        )
 
     def _build_steps_layout(self, step, layout_params, default_layout):
         layout_params = layout_params or {}