在弹出窗口中显示聊天框，就像在 Facebook 网页以及全屏视图模式中一样

Question

我已将 conversejs 设置为全屏视图模式。就像在 Facebook 中一样，当您单击聊天时，它会在弹出窗口中打开聊天，我也希望在 Conversejs 中具有相同的功能。聊天框将始终处于全屏视图模式，但我也可以在弹出窗口中打开聊天框，任何帮助将非常感激

我尝试了重叠视图模式，但聊天仅在弹出窗口中而不是全屏中，我希望它同时出现在两个地方。 我还尝试通过复制粘贴聊天框视图等来为此制作插件，但这是一个很长的路要走。

Answer 1

可以在运行时更改（某些）设置。

view_mode

设置就是其中之一。

您可以在浏览器的开发者控制台中亲自尝试。

首先确保

_converse

对象全局可用。

converse.plugins.add('converse-debug', {
    initialize () {
        const { _converse } = this;
        window._converse = _converse;
    }
});

converse.initialize({
    // Other settings not shown for conciseness
    view_mode: 'fullscreen',
    whitelisted_plugins: ['converse-debug'],
});

然后加载 Converse 并打开浏览器的开发控制台（例如按 F12），然后在控制台中尝试以下操作：

_converse.api.settings.set('view_mode', 'overlayed');

以下是通过插件实现此操作的方法：

<button type="button" class="btn switch-view-mode">
    <converse-icon class="fas fa-refresh" size="1em"></converse-icon>
    Switch Mode
</button>

<script>
converse.plugins.add('switch-view-mode', {
    initialize () {
        const { _converse } = this;
        const button = document.querySelector('.switch-view-mode');
        button.addEventListener('click', () => {
            const { api } = _converse;
            const view_mode = api.settings.get('view_mode');

            if (view_mode == 'fullscreen') {
                api.settings.set('view_mode', 'overlayed');
            } else {
                api.settings.set('view_mode', 'fullscreen');
            }
        });
    }
});

converse.initialize({
    // Other settings not shown
    whitelisted_plugins: ['switch-view-mode'],
});
</script>