Add height='auto' support for readonly mode and height customization in demo

Author: norman-ma

demo-bootstrap.html

@@ -104,6 +104,13 @@ <h5 class="card-title">Component Props Editor</h5>
                   </label>
                 </div>
               </div>
+              
+              <div class="col-md-6">
+                <label for="propHeight" class="form-label">
+                  <strong>height</strong> - Component height (e.g., "500px", "auto")
+                </label>
+                <input type="text" class="form-control" id="propHeight" value="500px">
+              </div>
             </div>
 
             <div class="mt-3">
@@ -396,6 +403,7 @@ <h5 class="card-title">Usage Example</h5>
     // Props Editor: Apply Props button handler
     document.getElementById('applyPropsBtn').addEventListener('click', () => {
       const isReadOnly = document.getElementById('propReadOnly').checked;
+      const heightValue = document.getElementById('propHeight').value.trim() || '500px';
 
       const props = {
         showCloseButton: document.getElementById('propShowCloseButton').checked,
@@ -404,7 +412,8 @@ <h5 class="card-title">Usage Example</h5>
         hideToggleButton: document.getElementById('propHideToggleButton').checked,
         hideDeliveryMethod: document.getElementById('propHideDeliveryMethod').checked,
         readOnly: isReadOnly,
-        disableClosedConversations: document.getElementById('propDisableClosedConversations').checked
+        disableClosedConversations: document.getElementById('propDisableClosedConversations').checked,
+        height: heightValue
       };
 
       // If readonly mode is enabled, inject the active conversation
@@ -447,6 +456,7 @@ <h5 class="card-title">Usage Example</h5>
       document.getElementById('propHideDeliveryMethod').checked = false;
       document.getElementById('propReadOnly').checked = false;
       document.getElementById('propDisableClosedConversations').checked = false;
+      document.getElementById('propHeight').value = '500px';
 
       // Get current state before reinitializing
       const currentState = ChatComponent.useChatStore.getState().exportState();

src/components/ChatComponent.jsx

@@ -100,7 +100,7 @@ const ChatComponent = ({
       <div 
         role="region"
         aria-label="Chat"
-        className={`chat-component-root tw-flex tw-flex-col tw-overflow-hidden tw-border tw-rounded-lg ${className}`}
+        className={`chat-component-root tw-flex tw-flex-col tw-border tw-rounded-lg ${className}`}
         style={{ 
           height,
           maxWidth,
@@ -121,8 +121,8 @@ const ChatComponent = ({
         </div>
 
         {/* Read-only message thread */}
-        <div className="tw-flex tw-flex-1 tw-overflow-hidden tw-h-full">
-          <div className="tw-flex tw-flex-col tw-flex-1 tw-bg-white tw-m-3.5 tw-rounded-lg tw-shadow-sm tw-overflow-hidden">
+        <div className="tw-flex">
+          <div className="tw-flex tw-flex-col tw-flex-1 tw-bg-white tw-m-3.5 tw-rounded-lg tw-shadow-sm">
             <MessageThread 
               currentUserId={currentUserId} 
               readOnlyConversation={conversation}