resizing not working on safari and chrome (mobile) [Bug]

[theodor961]

hello,

i tried to fix it be myslef but failed,

the chatbot is not resizing correctly in mobile when opening the keyboard (issue only on safari and chrome mobile)

as you can see when opening the keyboard on mobile , the chatbots input is hidden, you will need to scroll to see it

[tjtanjin]

Hey again @theodor961, viewport resize on mobile is indeed a pain to deal with. I have previously spent a couple days looking at it and you've probably seen some ugly workarounds within the codebase. That said, I was never certain that I have sufficiently addressed the issue, so it's not too unexpected to see this now.

All that said, I can take a look at this again but it may take a couple days given my current schedule. Hope you're not in too much of a rush to need this working.

[tjtanjin]

Hi again @theodor961, I'm unable to fully reproduce the issue you have shown in the image above. That said, I have a hunch of what could fix this for you but I'd like to engage your help with testing. If you're keen, could you perhaps reach out on discord or suggest an alternative platform? Appreciate your time.

[theodor961]

Hello Tjtanjin, the issue I'll be delighted to help you fix the issue, I am not used to discord but i have no problem using it.

We can also use WhatsApp for quick communication

Regards

On Wed, 7 Feb 2024, 19:30 Tan Jin, @.***> wrote:

Hi again @theodor961 https://github.com/theodor961, I'm unable to fully reproduce the issue you have shown in the image above. That said, I have a hunch of what could fix this for you but I'd like to engage your help with testing. If you're keen, could you perhaps reach out on discord https://discord.gg/X8VSdZvBQY or suggest an alternative platform? Appreciate your time.

— Reply to this email directly, view it on GitHub https://github.com/tjtanjin/react-chatbotify/issues/10#issuecomment-1932541678, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANM5GNBAUKD2U7X5ONFHNU3YSO245AVCNFSM6AAAAABC4SBAOOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZSGU2DCNRXHA . You are receiving this because you were mentioned.Message ID: @.***>

[tjtanjin]

@theodor961 If you're able to use discord it'd be very much appreciated. I will be available about 12 hours from now. Am excited to explore some potential fixes!

[theodor961]

Sure thing!

what is your discord name?

On Thu, 8 Feb 2024 at 03:09, Tan Jin @.***> wrote:

@theodor961 https://github.com/theodor961 If you're able to use discord it'd be very much appreciated. I will be available about 12 hours from now. Am excited to explore some potential fixes!

— Reply to this email directly, view it on GitHub https://github.com/tjtanjin/react-chatbotify/issues/10#issuecomment-1933207097, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANM5GNHFBIB5BSFOUMPLGTDYSQQV3AVCNFSM6AAAAABC4SBAOOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZTGIYDOMBZG4 . You are receiving this because you were mentioned.Message ID: @.***>

[tjtanjin]

Leaving a note here - conversation has been taken to discord to work on resolving the issue.

[tjtanjin]

Have released a fix in version 1.2.0 that should correctly address mobile views on majority of the devices/browsers. Thanks @theodor961 for helping to test things out!

[pferioli]

@tjtanjin I have the same issue using it with any iPhone, the input text is blocked with the keyboard, version is 1.7.0

[tjtanjin]

Hey @pferioli! I tried reproducing this on my iphone with no success 😰 Could you provide more information such as the following?

• Does it happen consistently or occasionally?
• Does this happen only on a specific browser?
• Does this happen on android as well?
• If you disable keyboard text predictions, is the issue still present?

Please feel free to share more information, hopefully this will shed light on what could be causing the issue. Thank you! 😊

[pferioli]

Hi @tjtanjin, thanks for the fast reply...

On your questions...

• Does it happen consistently or occasionally? always at least in 3 different iPhones
• Does this happen only on a specific browser? i tested in safari and chrome
• Does this happen on android as well? in android seems works ok
• If you disable keyboard text predictions, is the issue still present? i removed that and still happens

after some debugging we find out the issue is related to embedded:true, in iOS setting that to false seems to work ok

[tjtanjin]

Hey @pferioli! Thank you, those are very useful information.

I might have a hunch on why it's happening only on the embedded chatbots. There are very specific handling of keyboard and scroll behaviors that were only added to floating chatbots, with the intuition that embedded chatbots wouldn't expand to the full window. Thus, there was an assumption that without this resizing behavior, it wouldn't be subjected to the same kind of keyboard behaviors as floating chatbots (well turns out that wasn't entirely correct).

That said, I notice that in your screenshots, the chatbot is filling the entire screen (which seems to fit the behavior of a floating chatbot rather than an embedded one). Are you doing some special handling (perhaps via advance settings) to resize the chatbot on focus?

This is what I observe currently for embedded chatbots (notice that the chatbot doesn't resize and appears just as it is on my screen):

We're probably on to something so do keep the information coming, thanks!

[pferioli]

We're not doing nothing special. Our requirement is to have a responsive chatbot that uses the full-screen and run in any mobile device, so perhaps we're doing a wrong setup. In our case there's no floating button to trigger the chat

[tjtanjin]

We're not doing nothing special. Our requirement is to have a responsive chatbot that uses the full-screen and run in any mobile device, so perhaps we're doing a wrong setup. In our case there's no floating button to trigger the chat

I see, just to be very sure, can I assume that means your bot's height and width are both 100% to the device height and width (even on PC)?

[pferioli]

we're setting in "chatWindowStyle" width: "100%" and height: "100dvh" for all devices no matter if it's a PC or mobile

here's the config...

    isOpen: true,
    // ...other configurations
    theme: {
        embedded: false,
        primaryColor: "#42b0c5",
        secondaryColor: "#143D59",
        fontFamily: "Arial, sans-serif",
        showFooter: false,
        showHeader: true,
        mobileEnabled: true,
    },
    fileAttachment: { disabled: true },
    emoji: { disabled: false },
    notification: { disabled: true },
    headerStyle: {
        color: "#ffffff",
        width: "100%",
        maxHeight: "149px",
        background: "#257080",
    },
    header: {
        title: (
            <div className="w-screen flex justify-between items-center" >
                <div className="flex items-center gap-2">
                    <BackSvg width={22} height={22} />
                    <span
                        className="text-[18px] font-bold uppercase"
                        style={{ fontFamily: openSans.style.fontFamily }}
                    >
                        BOT AI
                    </span>
                </div>
                < Image
                    src="/logo_sin_fondo.png"
                    alt="Chatbot avatar logo"
                    width={65}
                    height={65}
                    className="mr-8"
                />
            </div>
        ),
        showAvatar: false,
    },
    footer: {
        text: (
            <span>
                Powered by < span className="font-semibold text-blue-600" > BOT </span>
            </span>
        ),
    },
    botBubble: {
        dangerouslySetInnerHtml: true,
    },
    chatWindowStyle: {
        width: "100%",
        height: "100dvh",
        borderRadius: "0",
        background: "#D6DDE0",
        backgroundImage: "url(/background_pattern.png)", 
        backgroundSize: "contain",
        backgroundPosition: "fit",
        backgroundRepeat: "repeat",
    },
    botBubbleStyle: {
        background: "#25553E",
        borderRadius: "1rem",
    },
    userBubbleStyle: {
        background: "#2A4E64",
        borderRadius: "1rem",
    },
    sendButtonStyle: {
        borderRadius: "0.6rem",
    },
    footerStyle: {
        background: "#D6DDE0",
    },
    audio: {
        disabled: true,
    },
    // ...other styles
    chatHistory: {
        disabled: true,
        maxEntries: 30,
        storageKey: "rcb-history",
        viewChatHistoryButtonText: "Load Chat History ⟳",
        chatHistoryLineBreakText: "----- Previous Chat History -----",
        autoLoad: false,
    },
    chatInput: {
        enabledPlaceholderText: "Escribir un mensaje...",
    },
};```

[tjtanjin]

Hey @pferioli, could you check if you experience the same issue over here: https://playground.tjtanjin.com

The above setup is an embedded chatbot with only the following styles applied:

chatWindowStyle: {
      width: "100vw",
      height: "100dvh",
      borderRadius: "0",
}

[pferioli]

@tjtanjin

sorry for the delay, we tested that and the keyboard is OK but there's an empty space at top and at bottom, i attached some pics and in red the empty space so you can see it

[tjtanjin]

Hey @pferioli, I am unable to test this now but can you try if changing "100dvh" to "100vh" makes a difference?

[pferioli]

@tjtanjin with embedded:false and height: "100vh" seems to work like a charm in safari and chorme with iOS

[tjtanjin]

@pferioli That's great to hear, but do those settings fit your use case?

[tjtanjin]

Hey @pferioli, any updates?

[pferioli]

with the last changes everything worked as expected. Thanks for the support !