Merge pull request #121 from sendbird/fix/AC-1659/enhance-mobile-uiux

[AC-1659] Fix mobile UX issues

src/components/ChatAiWidget.tsx

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { Chat } from './Chat';
 import WidgetWindow from './WidgetWindow';
 import { getColorBasedOnSaturation } from '../colors';
-import { Constant } from '../const';
+import { Constant, MAX_Z_INDEX } from '../const';
 import { useChannelStyle } from '../hooks/useChannelStyle';
 import useMobileView from '../hooks/useMobileView';
 import { ReactComponent as ArrowDownIcon } from '../icons/ic-arrow-down.svg';
@@ -15,7 +15,7 @@ import { isMobile } from '../utils';
 
 const MobileContainer = styled.div<{ width: number }>`
   position: fixed;
-  z-index: 10000;
+  z-index: ${MAX_Z_INDEX};
   top: 0;
   left: 0;
   width: ${({ width }) => `${width}px`};
@@ -26,7 +26,7 @@ const MobileContainer = styled.div<{ width: number }>`
 
 const StyledWidgetButtonWrapper = styled.button<{ accentColor: string }>`
   position: fixed;
-  z-index: 10000;
+  z-index: ${MAX_Z_INDEX};
   bottom: 24px;
   right: 24px;
   width: 48px;

src/components/CustomChannelComponent.tsx

@@ -16,7 +16,7 @@ import DynamicRepliesPanel from './DynamicRepliesPanel';
 import StaticRepliesPanel from './StaticRepliesPanel';
 import { useConstantState } from '../context/ConstantContext';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
-import { hideChatBottomBanner } from '../utils';
+import { hideChatBottomBanner, isIOSMobile } from '../utils';
 import {
   getBotWelcomeMessages,
   groupMessagesByShortSpanTime,
@@ -70,7 +70,9 @@ const Root = styled.div<RootStyleProps>`
       transition: width 0.5s;
       transition-timing-function: ease;
       padding: 8px 16px;
-      font-size: 14px;
+      // Not to zoom in on mobile set font-size to 16px which blocks the zooming on iOS
+      // @link: https://weblog.west-wind.com/posts/2023/Apr/17/Preventing-iOS-Safari-Textbox-Zooming
+      font-size: ${isIOSMobile ? 16 : 14}px;
       font-family: 'Roboto', sans-serif;
       line-height: 20px;
       color: ${({ theme }) => theme.textColor.messageInput};

src/components/CustomChannelHeader.tsx

@@ -10,7 +10,7 @@ import BotProfileImage from './BotProfileImage';
 import { useConstantState } from '../context/ConstantContext';
 import { useGroupChannel } from '../hooks/useGroupChannel';
 import { ReactComponent as CloseButton } from '../icons/ic-widget-close.svg';
-import { isMobile } from '../utils';
+import { isMobile, isEmpty } from '../utils';
 
 const Root = styled.div`
   display: flex;
@@ -103,9 +103,20 @@ export default function CustomChannelHeader() {
       <RenewButtonContainer>
         <RenewButtonForWidgetDemo onClick={onClickRenewButton}>
           <customRefreshComponent.icon
+            id="aichatbot-widget-refresh-icon"
             width={customRefreshComponent.width}
             height={customRefreshComponent.height}
-            style={customRefreshComponent.style}
+            style={
+              isEmpty(customRefreshComponent.style)
+                ? {
+                    position: 'relative',
+                    right: isMobile
+                      ? 0
+                      : // to make the refresh icon appear next to the expand & close icons in the widget window
+                        60,
+                  }
+                : customRefreshComponent.style
+            }
           />
         </RenewButtonForWidgetDemo>
         {isMobile && (

src/components/WidgetWindow.tsx

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 
 import { Chat } from './Chat';
 import { type Props as ChatWidgetProps } from './ChatAiWidget';
+import { MAX_Z_INDEX } from '../const';
 import { ReactComponent as CloseIcon } from '../icons/ic-widget-close.svg';
 import { ReactComponent as CollapseIcon } from '../icons/icon-collapse.svg';
 import { ReactComponent as ExpandIcon } from '../icons/icon-expand.svg';
@@ -37,7 +38,7 @@ const StyledWidgetWindowWrapper = styled.div<{
     return (
       isOpen &&
       css`
-        z-index: 10000;
+        z-index: ${MAX_Z_INDEX};
         pointer-events: all;
         transform: scale(1);
         opacity: 1;

src/const.ts

@@ -6,8 +6,11 @@ import React from 'react';
 import { ReactComponent as RefreshIcon } from './icons/refresh-icon.svg';
 import { noop, uuid } from './utils';
 
+// Most of browsers use a 32-bit signed integer as the maximum value for z-index
+export const MAX_Z_INDEX = 2147483647;
+
+// Want to use your own app_id? Get one from https://dashboard.sendbird.com/auth/signin
 const USER_ID = uuid();
-// get your app_id -> https://dashboard.sendbird.com/auth/signin
 
 export const DEFAULT_CONSTANT: Constant = {
   botNickName: 'Khan Academy Support Bot',
@@ -16,10 +19,8 @@ export const DEFAULT_CONSTANT: Constant = {
   betaMark: false,
   customBetaMarkText: 'BETA',
   suggestedMessageContent: {
-    replyContents: [
-    ],
-    messageFilterList: [
-    ],
+    replyContents: [],
+    messageFilterList: [],
   },
   firstMessageData: [
     // {
@@ -52,11 +53,6 @@ export const DEFAULT_CONSTANT: Constant = {
     icon: RefreshIcon,
     width: '16px',
     height: '16px',
-    style: {
-      position: 'relative',
-      // FIXME: This is a hack to make the refresh icon appear next to the expand & close icons in the widget window
-      right: '60px',
-    },
     onClick: noop,
   },
   enableSourceMessage: false,

src/utils/index.ts

@@ -172,7 +172,9 @@ export function delay(delayTime: number): Promise<void> {
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export function noop() {}
 
-export const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+export const isIOSMobile = /iPad|iPhone|iPod/.test(navigator.userAgent);
+export const isAndroidMobile = /Android/.test(navigator.userAgent);
+export const isMobile = isIOSMobile || isAndroidMobile;
 
 export function hideChatBottomBanner(sdk: SendbirdChat): boolean {
   const REMOVE_POWERED_BY = 'remove_powered_by';
@@ -210,3 +212,12 @@ export const replaceWithRegex = <T>(
   });
   return items;
 };
+
+export const isEmpty = (value: any) => {
+  if (value == null) return true;
+  if (typeof value === 'boolean' || typeof value === 'number') return !value;
+  if ('length' in value) return value.length === 0;
+  if (value instanceof Object) return Object.keys(value).length === 0;
+
+  return false;
+};