AI Chatbot interface height is not adjusted in homepage

Created on 13 March 2025, 3 months ago

Problem/Motivation

The AI chatbot window title is not shown in admin homepage.

Steps to reproduce

Enable AI chat bot block in claro theme
Go to the admin homepage
Open the AI chatbot interface.

The title is hidden under the header. Even on scroll to bottom doesn't show the header of the chatbot.
Tried adjusting the height of the chatbot using the Ai Deepchat block still the issue exist.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

1.1

Component

Other Submodules

Created by

🇮🇳India anjaliprasannan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @anjaliprasannan
  • jayzalani34@gmail.com made their first commit to this issue’s fork.

  • hey could you these issue to me I can solve it

  • 🇮🇳India anjaliprasannan

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

  • 🇮🇳India sanket.tale

    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.

  • 🇮🇳India Ishani Patel

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

  • 🇮🇳India anjaliprasannan

    @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.

  • 🇮🇳India libbna New Delhi, India
  • 🇮🇳India abhishek@kumar

    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)`;
        }
      }
    };
  • 🇮🇳India libbna New Delhi, India

    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.

  • Merge request !554Resized the chat window only for olivero theme. → (Open) created by libbna
  • 🇮🇳India libbna New Delhi, India
  • Pipeline finished with Failed
    about 2 months ago
    #472951
  • Pipeline finished with Failed
    about 2 months ago
    Total: 204s
    #472953
  • Pipeline finished with Success
    about 2 months ago
    Total: 195s
    #472987
  • Status changed to Needs review 10 days ago
  • 🇮🇳India Kanchan Bhogade

    Hi
    I have tested MR 554 on Drupal, and MR applied cleanly..

    The chatbot interface height has been adjusted, and the chatbot title is now visible on the admin homepage.

  • First commit to issue fork.
  • Pipeline finished with Failed
    9 days ago
    Total: 168s
    #504115
  • Pipeline finished with Failed
    3 days ago
    Total: 569s
    #509361
Production build 0.71.5 2024