Untitled

// Store initial heights
let initialChatHeight, initialMessagesContentHeight;

// Initialize initial heights
function initializeChatHeights() {
  const chatContainer = document.querySelector('#chat-container');
  const messagesContent = document.querySelector('.messages-content');
  initialChatHeight = chatContainer.scrollHeight;
  initialMessagesContentHeight = messagesContent.scrollHeight;
}

// Handle chat height animation
function handleChatHeightAnimation(action) {
  const chatContainer = document.querySelector('#chat-container');
  const messagesContent = document.querySelector('.messages-content');

  // Initialize heights if not set
  if (!initialChatHeight || !initialMessagesContentHeight) initializeChatHeights();

  // Set transitions and transform origin
  chatContainer.style.transition = messagesContent.style.transition = 'height 0.5s ease, transform 0.5s ease';
  chatContainer.style.transformOrigin = messagesContent.style.transformOrigin = 'bottom';

  if (action === 'hide') {
    // Hide chat: scale down and set height to 0
    chatContainer.style.height = messagesContent.style.height = '0';
    chatContainer.style.transform = messagesContent.style.transform = 'scale(0.8, 0)';
  } else if (action === 'show') {
    // Show chat: reset heights and scale back
    chatContainer.style.height = `${initialChatHeight}px`;
    messagesContent.style.height = `${initialMessagesContentHeight}px`;

    // Trigger reflow to apply height change
    chatContainer.offsetHeight; messagesContent.offsetHeight;

    // Scale back to original dimensions
    chatContainer.style.transform = messagesContent.style.transform = 'scale(1, 1)';
  }
}

// Example usage
// handleChatHeightAnimation('hide'); // Call this to hide
// handleChatHeightAnimation('show'); // Call this to show