read this. I found it helpful
这对我很有效：

$(document).ready(function() {
    
    // YOUR CODE (NOT RELATED TO DIALOGFLOW MESSENGER)

    window.addEventListener('dfMessengerLoaded', function (event) {
        $r1 = document.querySelector("df-messenger");
        $r2 = $r1.shadowRoot.querySelector("df-messenger-chat");
        $r3 = $r2.shadowRoot.querySelector("df-messenger-user-input"); //for other mods

        var sheet = new CSSStyleSheet;
        sheet.replaceSync( `div.chat-wrapper[opened="true"] { height: 400px }`);
        $r2.shadowRoot.adoptedStyleSheets = [ sheet ];

        // MORE OF YOUR DIALOGFLOW MESSENGER CODE
    });
});

您也可以更改其他细节，但要小心！Shadow DOM可能很棘手。

我有一个对我有效的解决方案：

window.addEventListener('dfMessengerLoaded', function (event) {
    const dfMessenger = document.querySelector('df-messenger'); 
    const style = document.createElement('style');

    const nonMobileMinWidth = 501; // Breakpoint where DF Messenger switches between mobile/non-mobile styles

    style.textContent = '@media screen and (min-width: ' + nonMobileMinWidth + 'px) { .chat-wrapper { max-height: 65% } }';

    dfMessenger.shadowRoot.querySelector('df-messenger-chat').shadowRoot.appendChild(style);
.
.
.

DF Messenger提供了许多有用的事件，你可以在这里参考，但不幸的是，它没有给出许多如何使用它们的例子。

这对我很有效：

//To minimise the height of chatbox
$(document).ready(function() {
    window.addEventListener('dfMessengerLoaded', function (event) {
    $r1 = document.querySelector("df-messenger");
    $r2 = $r1.shadowRoot.querySelector("df-messenger-chat");
    $r3 = $r2.shadowRoot.querySelector("df-messenger-user-input"); //for other mods
    var sheet = new CSSStyleSheet;
    // manage box height from here
    sheet.replaceSync( `div.chat-wrapper[opened="true"] { height: 340px }`);
         $r2.shadowRoot.adoptedStyleSheets = [ sheet ];
    });
});

Source

请在您的JavaScript文件中添加以下脚本

window.addEventListener("dfMessengerLoaded", function () {
    const dfMessengerWrapper = document.querySelector("df-messenger").shadowRoot.querySelector("df-messenger-chat").shadowRoot.querySelector(".chat-wrapper");

    dfMessengerWrapper.style.height = "600px";
    dfMessengerWrapper.style.width = "500px";
});

有了这个，你可以通过将高度改为你想要的值或自动来修复你的问题。

聊天Div嵌套2个shadowRoots深度。最重要的是，CSS是一个来自JS的“构造样式表”，所以它是由函数构建的。集成的信使最近刚刚改变（8/20/22），所以上面的代码将不再工作，没有轻微的修改。此外，上面的代码将清除任何现有的应用样式，只保留高度或宽度样式。一个更好的解决方案是将新的CSSStyleSheet追加到shadowRoot的adoptedStyleSheets中，而不是仅仅分配新的工作表。增加高度或下面的任何东西。你也可以在上面挂接一个事件，然后做数学运算来得到你的高度边界，然后设置高度。

<script>
    window.addEventListener('dfMessengerLoaded', function (event) {
        $df_messenger = document.querySelector("df-messenger");
        $df_messenger_chat = $df_messenger.shadowRoot.querySelector("df-messenger-chat");

        var sheet = new CSSStyleSheet;
        sheet.replaceSync( `div.chat-wrapper.chat-open { width: 500px; }`);
        $df_messenger_chat.shadowRoot.adoptedStyleSheets = [ ...$df_messenger_chat.shadowRoot.adoptedStyleSheets, sheet ];

        $df_messenger.renderCustomText('Testing renderer.');
    });
</script>

我无法访问该事件，所以我准备了两个单独的解决方案，基于Anshuman Kumar的答案登录：

<script>
$(function() {
//  const dfMessengerChat = document.querySelector("df-messenger-chat-bubble");
//  const chatWrapper = dfMessengerChat.shadowRoot.querySelector(".chat-wrapper")
//  $(chatWrapper).css({"width": "480px", "height": "65vh"});
    
    const dfMessengerChat = document.querySelector("df-messenger-chat-bubble");
    if (dfMessengerChat) {
      const chatWrapper = dfMessengerChat.shadowRoot.querySelector(".chat-wrapper");
      if (chatWrapper) {
        chatWrapper.style.width = "480px";
        chatWrapper.style.height = "65vh";
      }
    }
});
</script>

推荐的代码也可以工作。您可以选择所需的解决方案，它们都是工作解决方案。

下面的解决方案对我很有效。将代码放在索引页的head部分

<style>
  df-messenger {
    margin: 0;
    padding: 0;
    position: fixed;
    right: 0;
    transform: translateX(50%) translateY(50%);
    bottom: -90px;
  }
</style>

您可以尝试使用CSS调整小部件聊天显示容器的高度
使用CSS，您可以定义HTML元素的height, max-height and min-height，如：

df-messenger {
    height: 300px;
    max-height: 90%;
    min-height: 30%;
}

另外，请嵌入Meta标签以允许响应：

<meta name="viewport" content="width-device-width, initial-scale=1">