Can I use this to replicate the fixed input-box behaviour seen in OpenAI's ChatGPT UI?

[mo-shaz]

Hi, I read your article and it's a great read ❤️ . But I'm not sure if I can use this component to fix my current issue 😬 .

I'm trying to build a simple chat App (using NextJs), and I just want to make the chat input box always stick to bottom of the viewport when a virtual keyboard is open, just like ChatGPT.

I can achieve this behaviour in Android (or any chromium based browsers) just by using this HTML meta tag value interactive-widget=resize-content , but not on iOS.
I tried so many hacks using viswalViewport.height:

• reducing the container height
• giving a bottom margin to the input

Even though this pushes the input to the desired position, it also adds a blank space behind the keyboard that the user is able to scroll and see.

I'm fairly new to NextJS and react (I'm basically a backend developer by profession, trying to learn NextJS 🥹 ), please give me pointers if I'm missing something. There's not much material on this when I googled. I'm curious how ChatGPT is handling this without any visual glitch or stutter.

[stripearmy]

Thank you for reaching out.

I think the solution you are looking for is achievable WITHOUT my lib, you just need to force apply height: 100%; overflow: hidden to your HTML and BODY

Then, you need to apply input focus hack for iOS mentioned in this issue: #3

This will prevent your content from jumping up on iOS when you focus on input, this elevates your whole window object outside of your viewport, but I've always found this behavior of iOS annoying, we're lucky to have this css hack.

[stripearmy]

@mo-shaz did it work? if not, you can add me to your repo, I will try to help with the UI.