Incorrect mobile device detection - touch screen laptops trigger mobile UI behavior

[calycekr]

Bug description

The current mobile device detection logic incorrectly identifies laptops with touch screen functionality as mobile devices, resulting in the mobile user interface being displayed. This impacts usability on laptops with touch screen.

Submitting messages via enter key doesn't work, etc.

Steps to reproduce

1. Access the application on a laptop with a touch screen.
2. Observe the user interface behavior.
3. Submitting messages via enter key doesn't work.

Notes

I think root causes are in function isVirtualKeyboard() in ChatInput.svelte

chat-ui/src/lib/components/chat/ChatInput.svelte

Lines 88 to 101 in d238bc9

	function isVirtualKeyboard(): boolean {
	if (!browser) return false;
	// Check for touch capability
	if (navigator.maxTouchPoints > 0) return true;
	// Check for touch events
	if ("ontouchstart" in window) return true;
	// Fallback to user agent string check
	const userAgent = navigator.userAgent.toLowerCase();
	return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
	}

#1635

[nsarrazin]

Hi thanks for reporting, I've seen it reported before in the discussions page so it's good to track it here too. :)

Not sure what the best option is, the alternative is to use media queries based on screen width, for example on the ChatGPT interface that's what they do but the downside is that if the page width is small enough you also can't send with enter.

Doing it based on touch points seemed like the better option but touch screens are an issue then. Maybe we could do both?