Update ChatComponent scroll behavior to only target its own component

dash_chat/ChatComponent.py

@@ -15,12 +15,12 @@ class ChatComponent(Component):
     Keyword arguments:
 
     - id (string; optional):
-        The ID of this component, used to identify dash components in
-        callbacks. The ID needs to be unique across all of the components
+        The ID of this component, used to identify dash components  in
+        callbacks. The ID needs to be unique across all of the  components
         in an app.
 
     - assistant_bubble_style (dict; optional):
-        Css styles to customize the assistant message bubbles.
+        Css styles to customize the assistant message bubble.
 
     - class_name (string; default ""):
         Name for the class attribute to be added to the chat container.
@@ -47,8 +47,8 @@ class ChatComponent(Component):
 
     - messages (list of dicts; optional):
         An array of options. The list of chat messages. Each message
-        object should have:    - `role` (string): The message sender,
-        either \"user\" or \"assistant\".    - `content` (string): The
+        object should have:     - `role` (string): The message sender,
+        either \"user\" or \"assistant\".     - `content` (string): The
         content of the message.
 
         `messages` is a list of dicts with keys:
@@ -71,12 +71,12 @@ class ChatComponent(Component):
         for a dark mode appearance.
 
     - typing_indicator (a value equal to: "dots", "spinner"; default "dots"):
-        The type of typing indicator to display. Options are:    -
-        `\"dots\"`: Displays animated dots.    - `\"spinner\"`: Displays a
-        spinner animation.
+        The type of typing indicator to display. Options are:     -
+        `\"dots\"`: Displays animated dots.     - `\"spinner\"`: Displays
+        a spinner animation.
 
     - user_bubble_style (dict; optional):
-        Css styles to customize the user message bubbles."""
+        Css styles to customize the user message bubble."""
 
     _children_props = []
     _base_nodes = ["children"]
@@ -102,7 +102,7 @@ def __init__(
         class_name=Component.UNDEFINED,
         persistence=Component.UNDEFINED,
         persistence_type=Component.UNDEFINED,
-        **kwargs
+        **kwargs,
     ):
         self._prop_names = [
             "id",

dash_chat/_imports_.py

@@ -1,3 +1,5 @@
 from .ChatComponent import ChatComponent
 
-__all__ = ["ChatComponent"]
+__all__ = [
+    "ChatComponent"
+]

dash_chat/metadata.json

@@ -1 +1 @@
-{"src/lib/components/ChatComponent.js":{"description":"ChatComponent - A React-based chat interface with customizable styles and typing indicators.\n* This component provides a chat interface with support for:\n- Displaying messages exchanged between 2 users typically a user and an assistant.\n- Customizable themes and styles for the chat UI.\n- Typing indicators for both the user and assistant.\n- Integration with Dash via the `setProps` callback for state management.","displayName":"ChatComponent","methods":[],"props":{"id":{"type":{"name":"string"},"required":false,"description":"The ID of this component, used to identify dash components\nin callbacks. The ID needs to be unique across all of the\ncomponents in an app."},"messages":{"type":{"name":"arrayOf","value":{"name":"shape","value":{"role":{"name":"enum","value":[{"value":"\"user\"","computed":false},{"value":"\"assistant\"","computed":false}],"required":true},"content":{"name":"string","required":true}}}},"required":false,"description":"An array of options. The list of chat messages. Each message object should have:\n   - `role` (string): The message sender, either \"user\" or \"assistant\".\n   - `content` (string): The content of the message.","defaultValue":{"value":"[]","computed":false}},"setProps":{"type":{"name":"func"},"required":false,"description":"Dash-assigned callback that gets fired when the value for messages and isTyping changes.","defaultValue":{"value":"() => { }","computed":false}},"theme":{"type":{"name":"string"},"required":false,"description":"Theme for the chat interface. Default is \"light\". Use \"dark\" for a dark mode appearance.","defaultValue":{"value":"\"light\"","computed":false}},"container_style":{"type":{"name":"object"},"required":false,"description":"Inline css styles to customize the chat container.","defaultValue":{"value":"null","computed":false}},"typing_indicator":{"type":{"name":"enum","value":[{"value":"\"dots\"","computed":false},{"value":"\"spinner\"","computed":false}]},"required":false,"description":"The type of typing indicator to display. Options are:\n   - `\"dots\"`: Displays animated dots.\n   - `\"spinner\"`: Displays a spinner animation.","defaultValue":{"value":"\"dots\"","computed":false}},"new_message":{"type":{"name":"object"},"required":false,"description":"Latest chat message that was appended to messages array."},"input_container_style":{"type":{"name":"object"},"required":false,"description":"Inline styles for the container holding the message input field.","defaultValue":{"value":"null","computed":false}},"input_text_style":{"type":{"name":"object"},"required":false,"description":"Inline styles for the message input field itself.","defaultValue":{"value":"null","computed":false}},"fill_height":{"type":{"name":"bool"},"required":false,"description":"Whether to vertically fill the screen with the chat container. If False, centers and constrains container to a maximum height.","defaultValue":{"value":"true","computed":false}},"fill_width":{"type":{"name":"bool"},"required":false,"description":"Whether to horizontally fill the screen with the chat container. If False, centers and constrains container to a maximum width.","defaultValue":{"value":"true","computed":false}},"user_bubble_style":{"type":{"name":"object"},"required":false,"description":"Css styles to customize the user message bubbles.","defaultValue":{"value":"{}","computed":false}},"assistant_bubble_style":{"type":{"name":"object"},"required":false,"description":"Css styles to customize the assistant message bubbles.","defaultValue":{"value":"{}","computed":false}},"input_placeholder":{"type":{"name":"string"},"required":false,"description":"Placeholder input to bne used in the input field","defaultValue":{"value":"\"\"","computed":false}},"class_name":{"type":{"name":"string"},"required":false,"description":"Name for the class attribute to be added to the chat container","defaultValue":{"value":"\"\"","computed":false}},"persistence":{"type":{"name":"bool"},"required":false,"description":"Whether messages should be stored for persistence","defaultValue":{"value":"false","computed":false}},"persistence_type":{"type":{"name":"enum","value":[{"value":"\"local\"","computed":false},{"value":"\"session\"","computed":false}]},"required":false,"description":"Where persisted messages will be stored","defaultValue":{"value":"\"local\"","computed":false}}}}}
+{"src/lib/components/ChatComponent.js":{"description":"ChatComponent - A React-based chat interface with customizable styles and typing indicators.\r\n* This component provides a chat interface with support for:\r\n- Displaying messages exchanged between 2 users typically a user and an assistant.\r\n- Customizable themes and styles for the chat UI.\r\n- Typing indicators for both the user and assistant.\r\n- Integration with Dash via the `setProps` callback for state management.","displayName":"ChatComponent","methods":[],"props":{"id":{"type":{"name":"string"},"required":false,"description":"The ID of this component, used to identify dash components\r\nin callbacks. The ID needs to be unique across all of the\r\ncomponents in an app."},"messages":{"type":{"name":"arrayOf","value":{"name":"shape","value":{"role":{"name":"enum","value":[{"value":"\"user\"","computed":false},{"value":"\"assistant\"","computed":false}],"required":true},"content":{"name":"string","required":true}}}},"required":false,"description":"An array of options. The list of chat messages. Each message object should have:\r\n   - `role` (string): The message sender, either \"user\" or \"assistant\".\r\n   - `content` (string): The content of the message.","defaultValue":{"value":"[]","computed":false}},"setProps":{"type":{"name":"func"},"required":false,"description":"Dash-assigned callback that gets fired when the value for messages and isTyping changes.","defaultValue":{"value":"() => { }","computed":false}},"theme":{"type":{"name":"string"},"required":false,"description":"Theme for the chat interface. Default is \"light\". Use \"dark\" for a dark mode appearance.","defaultValue":{"value":"\"light\"","computed":false}},"container_style":{"type":{"name":"object"},"required":false,"description":"Inline css styles to customize the chat container.","defaultValue":{"value":"null","computed":false}},"typing_indicator":{"type":{"name":"enum","value":[{"value":"\"dots\"","computed":false},{"value":"\"spinner\"","computed":false}]},"required":false,"description":"The type of typing indicator to display. Options are:\r\n   - `\"dots\"`: Displays animated dots.\r\n   - `\"spinner\"`: Displays a spinner animation.","defaultValue":{"value":"\"dots\"","computed":false}},"new_message":{"type":{"name":"object"},"required":false,"description":"Latest chat message that was appended to messages array."},"input_container_style":{"type":{"name":"object"},"required":false,"description":"Inline styles for the container holding the message input field.","defaultValue":{"value":"null","computed":false}},"input_text_style":{"type":{"name":"object"},"required":false,"description":"Inline styles for the message input field itself.","defaultValue":{"value":"null","computed":false}},"fill_height":{"type":{"name":"bool"},"required":false,"description":"Whether to vertically fill the screen with the chat container. If False, centers and constrains container to a maximum height.","defaultValue":{"value":"true","computed":false}},"fill_width":{"type":{"name":"bool"},"required":false,"description":"Whether to horizontally fill the screen with the chat container. If False, centers and constrains container to a maximum width.","defaultValue":{"value":"true","computed":false}},"user_bubble_style":{"type":{"name":"object"},"required":false,"description":"Css styles to customize the user message bubble.","defaultValue":{"value":"{}","computed":false}},"assistant_bubble_style":{"type":{"name":"object"},"required":false,"description":"Css styles to customize the assistant message bubble.","defaultValue":{"value":"{}","computed":false}},"input_placeholder":{"type":{"name":"string"},"required":false,"description":"Placeholder input to bne used in the input field","defaultValue":{"value":"\"\"","computed":false}},"class_name":{"type":{"name":"string"},"required":false,"description":"Name for the class attribute to be added to the chat container","defaultValue":{"value":"\"\"","computed":false}},"persistence":{"type":{"name":"bool"},"required":false,"description":"Whether messages should be stored for persistence","defaultValue":{"value":"false","computed":false}},"persistence_type":{"type":{"name":"enum","value":[{"value":"\"local\"","computed":false},{"value":"\"session\"","computed":false}]},"required":false,"description":"Where persisted messages will be stored","defaultValue":{"value":"\"local\"","computed":false}}}}}

src/lib/components/ChatComponent.js

@@ -127,7 +127,7 @@ const ChatComponent = ({
 
     useEffect(() => {
         if (messageEndRef.current) {
-            messageEndRef.current.scrollIntoView({ behavior: "smooth" });
+            messageEndRef.current.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
         }
     }, [localMessages]);