Add messages_container_style and header_style props to ChatWidget and ChatWindow components

README.md

@@ -102,6 +102,8 @@ Use the widget API to customize your widget:
 | chat_position         | string    | No       |
 | chat_trigger_style    | json      | No       |
 | chat_window_style     | json      | No       |
+| messages_container_style | json   | No       |
+| header_style          | json      | No       |
 | output_type           | string    | No       |
 | input_type            | string    | No       |
 | output_component      | string    | No       |
@@ -166,6 +168,16 @@ Use the widget API to customize your widget:
   - Required: No
   - Description: Styling options for the overall chat window.
 
+- **messages_container_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for the messages container in the chat window.
+
+- **header_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for the header of the chat window.
+
 - **error_message_style:**
   - Type: JSON
   - Required: No

src/chatWidget/chatWindow/index.tsx

@@ -19,6 +19,8 @@ export default function ChatWindow({
   send_icon_style,
   user_message_style,
   chat_window_style,
+  messages_container_style,
+  header_style,
   error_message_style,
   placeholder_sending,
   send_button_style,
@@ -47,6 +49,8 @@ export default function ChatWindow({
   send_icon_style?: React.CSSProperties;
   user_message_style?: React.CSSProperties;
   chat_window_style?: React.CSSProperties;
+  messages_container_style?: React.CSSProperties;
+  header_style?: React.CSSProperties;
   error_message_style?: React.CSSProperties;
   send_button_style?: React.CSSProperties;
   online?: boolean;
@@ -201,7 +205,10 @@ export default function ChatWindow({
         ref={ref}
         className="cl-window"
       >
-        <div className="cl-header">
+        <div 
+          style={header_style}
+          className="cl-header"
+        >
           {window_title}
           <div className="cl-header-subtitle">
             {online ? (
@@ -217,7 +224,10 @@ export default function ChatWindow({
             )}
           </div>
         </div>
-        <div className="cl-messages_container">
+        <div 
+          style={messages_container_style}
+          className="cl-messages_container"
+        >
           {messages.map((message, index) => (
             <ChatMessage
               bot_message_style={bot_message_style}

src/chatWidget/index.tsx

@@ -17,6 +17,8 @@ export default function ChatWidget({
   bot_message_style,
   user_message_style,
   chat_window_style,
+  messages_container_style,
+  header_style,
   height,
   width,
   error_message_style,
@@ -45,6 +47,8 @@ export default function ChatWidget({
   bot_message_style?: React.CSSProperties;
   user_message_style?: React.CSSProperties;
   chat_window_style?: React.CSSProperties;
+  messages_container_style?: React.CSSProperties;
+  header_style?: React.CSSProperties;
   online?: boolean;
   online_message?: string;
   offline_message?: string;
@@ -2159,6 +2163,8 @@ input::-ms-input-placeholder { /* Microsoft Edge */
         bot_message_style={bot_message_style}
         user_message_style={user_message_style}
         chat_window_style={chat_window_style}
+        messages_container_style={messages_container_style}
+        header_style={header_style}
         error_message_style={error_message_style}
         send_button_style={send_button_style}
         placeholder={placeholder}

src/index.tsx

@@ -19,6 +19,8 @@ customElements.define('langflow-chat', r2wc(ChatWidget, {
         bot_message_style:"json",
         user_message_style:"json",
         chat_window_style:"json",
+        messages_container_style:"json",
+        header_style:"json",
         height:"number",
         width:"number",
         session_id:"string",