Dash Chat Component

Dash Python
,
12

It seems the issue might be related to the dash-chat component itself. The component includes a default container class wrapping the chat box, which could be applying a fixed width.

To fix this, you can try creating a custom stylesheet to override the .container class. For example:

.container {  
  width: your-desired-width !important;  
}

Keep in mind that this will affect any element in your app using the .container class, so use it cautiously. A more targeted approach would be:

.container:has(.chat-container) {  
  width: your-desired-width;  
}

This will apply the style specifically to the container wrapping the chat box.

If neither of these solutions works, I can address this in a future update by removing the default container, which will make the chat box easier to style and integrate.

2 Likes