AI Chatbot interface height is not adjusted in homepage

jayzalani34@gmail.com → made their first commit to this issue’s fork.

hey could you these issue to me I can solve it

You can assign this issue to yourself in the edit page of this issue.

Hi @anjaliprasannan I tried to reproduced this issue but facing some issues can you please add the proper steps. How to configure this module.

1. Install AI module
2. Claro theme Set as default
3. Placed AI chatbot block

An error is occurring after placing a block.

Facing the same AI chatbot height issue when I enable AI chatbot block on homepage.

@sanket.tale when you add the ai chatbot in claro theme, you can only see the block in admnistrative pages and not in homepage. To view the block in homepage try adding it in the olivero theme block layout.

CSS Adjustment

.ai-chatbot-container {
  height: calc(100vh - [admin-header-height]);
  top: [admin-header-height] !important;
}

.ai-chatbot-container {
  z-index: 500; /* Higher than admin toolbar */
}

JavaScript Dynamic Resizing

Drupal.behaviors.aiChatbotResize = {
  attach: function (context) {
    const header = document.querySelector('.admin-toolbar');
    const chatbot = document.querySelector('.ai-chatbot-container');
    if (header && chatbot) {
      chatbot.style.top = `${header.offsetHeight}px`;
      chatbot.style.height = `calc(100vh - ${header.offsetHeight}px)`;
    }
  }
};

I tried resolving it on my end and noticed that if we change the z-index value of the .header class to 0, the chatbot appears above the header. However, since we can't change that, I explored another approach:

What if we reduce the height of the chatbot initially, and then increase it when the page scrolls past a certain point? I'm attaching a video of what I’ve tried—before pushing the code I want to know your inputs please do share.