Bot UI: Enhance UX on mobile

Author: Bogdan Tsechoev

ui/packages/platform/src/components/ContentLayout/Footer/index.tsx

@@ -68,7 +68,7 @@ export const Footer = () => {
   const classes = useStyles()
 
   return (
-    <div className={classes.footer}>
+    <footer className={classes.footer}>
       <div className={classes.footerCopyrightItem}>
         {new Date().getFullYear()} © Postgres.AI
       </div>
@@ -103,6 +103,6 @@ export const Footer = () => {
           </GatewayLink>
         </div>
       </div>
-    </div>
+    </footer>
   )
 }

ui/packages/platform/src/pages/Bot/ChatsList/ChatsList.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { useParams } from "react-router";
 import cn from "classnames";
-import { makeStyles, Theme } from "@material-ui/core";
+import { makeStyles, Theme, useMediaQuery } from "@material-ui/core";
 import Drawer from '@material-ui/core/Drawer';
 import List from "@material-ui/core/List";
 import Divider from "@material-ui/core/Divider";
@@ -18,6 +18,7 @@ import Box from "@mui/material/Box";
 import { Spinner } from "@postgres.ai/shared/components/Spinner";
 import { HeaderButtons, HeaderButtonsProps } from "../HeaderButtons/HeaderButtons";
 import { BotMessage } from "../../../types/api/entities/bot";
+import { theme } from "@postgres.ai/shared/styles/theme";
 
 
 const useStyles = makeStyles<Theme, ChatsListProps>((theme) => ({
@@ -111,7 +112,7 @@ export const ChatsList = (props: ChatsListProps) => {
   } = props;
   const classes = useStyles(props);
   const params = useParams<{ org?: string, threadId?: string }>();
-
+  const matches = useMediaQuery(theme.breakpoints.down('sm'));
   const linkBuilder = (msgId: string) => {
     if (params.org) {
       return `/${params.org}/bot/${msgId}`
@@ -126,6 +127,12 @@ export const ChatsList = (props: ChatsListProps) => {
     }
   }
 
+  const handleCloseOnClickOutside = () => {
+    if (matches) {
+      onClose()
+    }
+  }
+
   const loader = (
     <Box className={classes.loader}>
       <Spinner/>
@@ -172,11 +179,12 @@ export const ChatsList = (props: ChatsListProps) => {
 
   return (
     <Drawer
-      variant={'persistent'}
+      variant={matches ? 'temporary' : 'persistent'}
       anchor="right"
       BackdropProps={{ invisible: true }}
       elevation={1}
       open={isOpen}
+      onClose={handleCloseOnClickOutside}
       classes={{
         paper: classes.drawerPaper
       }}

ui/packages/platform/src/pages/Bot/Command/Command.tsx

@@ -13,6 +13,7 @@ import {
 import { useBuffer } from './useBuffer'
 import { useCaret } from './useCaret'
 import { theme } from "@postgres.ai/shared/styles/theme";
+import { isMobileDevice } from "../../../utils/utils";
 
 
 type Props = {
@@ -76,7 +77,7 @@ export const Command = React.memo((props: Props) => {
   const { sendDisabled, onSend, threadId } = props
 
   const classes = useStyles()
-
+  const isMobile = isMobileDevice();
   // Handle value.
   const [value, setValue] = useState('')
 
@@ -104,11 +105,21 @@ export const Command = React.memo((props: Props) => {
   }
 
   const handleBlur = () => {
-    if (window.innerWidth < theme.breakpoints.values.sm)
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    })
+    if ((window.innerWidth < theme.breakpoints.values.sm) && isMobile) {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      })
+      const footer: HTMLElement | null = document.querySelector("footer")
+      if (footer) footer.style.display = 'flex';
+    }
+  }
+
+  const handleFocus = () => {
+    if ((window.innerWidth < theme.breakpoints.values.sm)  && isMobile) {
+      const footer: HTMLElement | null = document.querySelector("footer")
+      if (footer) footer.style.display = 'none';
+    }
   }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -163,19 +174,20 @@ export const Command = React.memo((props: Props) => {
   return (
     <div className={classes.root}>
       <TextField
-        autoFocus={true}
+        autoFocus={window.innerWidth > theme.breakpoints.values.sm}
         multiline
         className={classes.field}
         onKeyDown={handleKeyDown}
+        onChange={handleChange}
         onBlur={handleBlur}
+        onFocus={handleFocus}
         InputProps={{
           inputRef,
           classes: {
             input: classes.fieldInput,
           },
         }}
         value={value}
-        onChange={handleChange}
         placeholder="Message..."
       />
       <IconButton

ui/packages/platform/src/pages/Bot/Command/utils.ts

@@ -1,8 +1,18 @@
-export const checkIsSendCmd = (e: KeyboardEvent) =>
-  e.code === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey
+import { isMobileDevice } from "../../../utils/utils";
 
-export const checkIsNewLineCmd = (e: KeyboardEvent) =>
-  e.code === 'Enter' && (e.shiftKey || e.ctrlKey || e.metaKey)
+export const checkIsSendCmd = (e: KeyboardEvent): boolean => {
+  if (isMobileDevice()) {
+    return false; // On mobile devices, Enter should not send.
+  }
+  return e.code === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey;
+};
+
+export const checkIsNewLineCmd = (e: KeyboardEvent): boolean => {
+  if (isMobileDevice()) {
+    return e.code === 'Enter'; // On mobile devices, Enter should create a new line.
+  }
+  return e.code === 'Enter' && (e.shiftKey || e.ctrlKey || e.metaKey);
+};
 
 export const addNewLine = (
   value: string,

ui/packages/platform/src/utils/utils.ts

@@ -31,3 +31,41 @@ export const validateDLEName = (name: string) => {
     !name.match(/^([a-z](?:[-a-z0-9]{0,61}[a-z0-9])?|[1-9][0-9]{0,19})$/)
   )
 }
+
+export const isMobileDevice = (): boolean => {
+  let hasTouchScreen = false;
+
+  // Check for modern touch screen devices using maxTouchPoints
+  if ("maxTouchPoints" in navigator) {
+    hasTouchScreen = navigator.maxTouchPoints > 0;
+  }
+  // Check for older versions of IE with msMaxTouchPoints
+  else if ("msMaxTouchPoints" in navigator) {
+    hasTouchScreen = (navigator as unknown as { msMaxTouchPoints: number }).msMaxTouchPoints > 0;
+  }
+  // Use matchMedia to check for coarse pointer devices
+  else {
+    const mQ = window.matchMedia("(pointer:coarse)");
+    if (mQ && mQ.media === "(pointer:coarse)") {
+      hasTouchScreen = mQ.matches;
+    }
+    // Check for the presence of the orientation property as a fallback (deprecated in modern browsers)
+    else if ('orientation' in window) {
+      hasTouchScreen = true;
+    }
+    // Last resort: fallback with user agent sniffing
+    else {
+      const UA = navigator.userAgent;
+      hasTouchScreen = (
+        /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
+        /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
+      );
+    }
+  }
+
+  // Check for mobile screen width, 1366 because of iPad Pro in Landscape mode
+  // If this is not necessary, may reduce value to 1024 or 768
+  const isMobileScreen = window.innerWidth <= 1366;
+
+  return hasTouchScreen && isMobileScreen;
+}

ui/packages/shared/components/TextField/index.tsx

@@ -34,6 +34,7 @@ export type TextFieldProps = {
   error?: boolean
   placeholder?: string
   onBlur?: TextFieldPropsBase['onBlur']
+  onFocus?: TextFieldPropsBase['onFocus']
 }
 
 const useStyles = makeStyles(
@@ -98,6 +99,7 @@ export const TextField = (props: TextFieldProps) => {
       error={props.error}
       placeholder={props.placeholder}
       onBlur={props.onBlur}
+      onFocus={props.onFocus}
     />
   )
 }