Refactoring and cleanup of Chat components

panel/chat/feed.py

@@ -797,6 +797,36 @@ def _match_step_status(self, event):
             self._callback_state = CallbackState.IDLE
             self._run_post_hook(event.obj)
 
+    def _build_steps_layout(self, step, layout_params, default_layout):
+        layout_params = layout_params or {}
+        input_layout_params = dict(
+            min_width=100,
+            styles={
+                "margin-inline": "10px",
+            },
+            css_classes=["chat-steps"],
+            stylesheets=[f"{CDN_DIST}css/chat_steps.css"]
+        )
+        if default_layout == "column":
+            layout = Column
+        elif default_layout == "card":
+            layout = self._card_type
+            input_layout_params["header_css_classes"] = ["card-header"]
+            title = layout_params.pop("title", None)
+            input_layout_params["header"] = HTML(
+                title or "🪜 Steps",
+                css_classes=["card-title"],
+                stylesheets=[f"{CDN_DIST}css/chat_steps.css"]
+            )
+        else:
+            raise ValueError(
+                f"Invalid default_layout {default_layout!r}; "
+                f"expected 'column' or 'card'."
+            )
+        if layout_params:
+            input_layout_params.update(layout_params)
+        return layout(step, **input_layout_params)
+
     def add_step(
         self,
         step: str | list[str] | ChatStep | None = None,
@@ -875,34 +905,7 @@ def add_step(
                     steps_layout = last.object
 
         if steps_layout is None:
-            layout_params = layout_params or {}
-            input_layout_params = dict(
-                min_width=100,
-                styles={
-                    "margin-inline": "10px",
-                },
-                css_classes=["chat-steps"],
-                stylesheets=[f"{CDN_DIST}css/chat_steps.css"]
-            )
-            if default_layout == "column":
-                layout = Column
-            elif default_layout == "card":
-                layout = self._card_type
-                input_layout_params["header_css_classes"] = ["card-header"]
-                title = layout_params.pop("title", None)
-                input_layout_params["header"] = HTML(
-                    title or "🪜 Steps",
-                    css_classes=["card-title"],
-                    stylesheets=[f"{CDN_DIST}css/chat_steps.css"]
-                )
-            else:
-                raise ValueError(
-                    f"Invalid default_layout {default_layout!r}; "
-                    f"expected 'column' or 'card'."
-                )
-            if layout_params:
-                input_layout_params.update(layout_params)
-            steps_layout = layout(step, **input_layout_params)
+            steps_layout = self._build_steps_layout(step, layout_params, default_layout)
             self.stream(steps_layout, user=user or self.callback_user, avatar=avatar, trigger_post_hook=False)
         else:
             steps_layout.append(step)

panel/chat/message.py

@@ -449,47 +449,32 @@ def _select_renderer(
                 contents = contents.decode("utf-8")
         return contents, renderer
 
-    def _include_stylesheets_inplace(self, obj):
-        if hasattr(obj, "objects"):
-            obj.objects[:] = [
-                self._include_stylesheets_inplace(o) for o in obj.objects
-            ]
-        else:
-            obj = _panel(obj)
-        obj.stylesheets = [
-            stylesheet for stylesheet in self._stylesheets + self.stylesheets
-            if stylesheet not in obj.stylesheets
-        ] + obj.stylesheets
-        return obj
-
-    def _include_message_css_class_inplace(self, obj):
-        if hasattr(obj, "objects"):
-            obj.objects[:] = [
-                self._include_message_css_class_inplace(o)
-                for o in obj.objects
-            ]
-        else:
-            obj = _panel(obj)
-        is_markup = isinstance(obj, HTMLBasePane) and not isinstance(obj, FileBase)
-        if obj.css_classes or not is_markup:
-            return obj
-        if len(str(obj.object)) > 0:  # only show a background if there is content
-            obj.css_classes = [*(css for css in obj.css_classes if css != "message"), "message"]
-        obj.sizing_mode = None
-        return obj
+    def _include_styles(self, obj):
+        obj = _panel(obj)
+        for o in obj.select():
+            params = {
+                "stylesheets": [
+                    stylesheet for stylesheet in self._stylesheets + self.stylesheets
+                    if stylesheet not in o.stylesheets
+                ] + o.stylesheets
+            }
+            is_markup = isinstance(o, HTMLBasePane) and not isinstance(o, FileBase)
+            if is_markup:
+                params["sizing_mode"] = None
+                if not o.css_classes and len(str(o.object)) > 0:  # only show a background if there is content
+                    params["css_classes"] = [
+                        *(css for css in o.css_classes if css != "message"), "message"
+                    ]
+            o.param.update(**params)
 
     def _set_params(self, obj, **params):
         """
         Set the sizing mode and height of the object.
         """
-        self._include_stylesheets_inplace(obj)
-        is_markup = isinstance(obj, HTMLBasePane) and not isinstance(obj, FileBase)
-        if is_markup:
-            self._include_message_css_class_inplace(obj)
-        else:
+        self._include_styles(obj)
+        if not isinstance(obj, (FileBase, HTMLBasePane)):
             if obj.sizing_mode is None and not obj.width:
                 params['sizing_mode'] = "stretch_width"
-
             if obj.height is None and not isinstance(obj, ParamFunction):
                 params['height'] = 500
         obj.param.update(params)
@@ -504,8 +489,7 @@ def _create_panel(self, value, old=None):
         """
         if isinstance(value, Viewable):
             self._internal = False
-            self._include_stylesheets_inplace(value)
-            self._include_message_css_class_inplace(value)
+            self._include_styles(value)
             return value
 
         renderer = None

panel/dist/css/chat_feed.css

@@ -7,5 +7,5 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--panel-secondary-color, #f1f1f1);
+  background-color: var(--panel-surface-color, #f1f1f1);
 }

panel/models/html.ts

@@ -124,7 +124,7 @@ export class HTMLView extends PanelMarkupView {
   }
 
   set_html(html: string | null): void {
-    if (html === null) {
+    if (html === null || this.container == null) {
       return
     }
     this.container.innerHTML = html

panel/models/reactive_esm.ts

@@ -187,6 +187,7 @@ export class ReactiveESMView extends HTMLBoxView {
 
   override initialize(): void {
     super.initialize()
+    this._child_callbacks = new Map()
     this.model_proxy = new Proxy(this, {
       get: model_getter,
       set: model_setter,
@@ -290,6 +291,7 @@ export class ReactiveESMView extends HTMLBoxView {
     this._update_stylesheets()
     this._update_css_classes()
     this._apply_styles()
+    this._update_css_variables()
     this._apply_visible()
 
     this._child_callbacks = new Map()