diff --git a/src/components/ChatBotBody/ChatBotBody.tsx b/src/components/ChatBotBody/ChatBotBody.tsx index 14871baa..5102243e 100644 --- a/src/components/ChatBotBody/ChatBotBody.tsx +++ b/src/components/ChatBotBody/ChatBotBody.tsx @@ -83,8 +83,8 @@ const ChatBotBody = ({ const toastPromptContainerStyle: CSSProperties = { bottom: 20, width: 300, - minWidth: (styles.chatWindowStyle?.width as number || 375) / 2, - maxWidth: (styles.chatWindowStyle?.width as number || 375) - 50, + minWidth: (styles.chatWindowStyle?.width as number ?? 375) / 2, + maxWidth: (styles.chatWindowStyle?.width as number ?? 375) - 50, ...styles.toastPromptContainerStyle }; @@ -151,7 +151,7 @@ const ChatBotBody = ({ } const { scrollTop, clientHeight, scrollHeight } = chatBodyRef.current; setIsScrolling( - scrollTop + clientHeight < scrollHeight - (settings.chatWindow?.messagePromptOffset || 30) + scrollTop + clientHeight < scrollHeight - (settings.chatWindow?.messagePromptOffset ?? 30) ); // workaround to ensure user never truly scrolls to bottom by introducing a 1 pixel offset diff --git a/src/components/ChatBotBody/UserCheckboxes/UserCheckboxes.tsx b/src/components/ChatBotBody/UserCheckboxes/UserCheckboxes.tsx index cc6f7336..813ddd94 100644 --- a/src/components/ChatBotBody/UserCheckboxes/UserCheckboxes.tsx +++ b/src/components/ChatBotBody/UserCheckboxes/UserCheckboxes.tsx @@ -143,7 +143,7 @@ const UserCheckboxes = ({ if (checkboxes.sendOutput) { sendInChat = checkboxes.sendOutput; } else { - sendInChat = settings.chatInput?.sendCheckboxOutput || true; + sendInChat = settings.chatInput?.sendCheckboxOutput ?? true; } handleSubmitText(userInput, sendInChat); }} diff --git a/src/components/ChatBotBody/UserOptions/UserOptions.tsx b/src/components/ChatBotBody/UserOptions/UserOptions.tsx index cfcbcc2a..27f85786 100644 --- a/src/components/ChatBotBody/UserOptions/UserOptions.tsx +++ b/src/components/ChatBotBody/UserOptions/UserOptions.tsx @@ -110,7 +110,7 @@ const UserOptions = ({ if (options.sendOutput) { sendInChat = options.sendOutput; } else { - sendInChat = settings.chatInput?.sendOptionOutput || true; + sendInChat = settings.chatInput?.sendOptionOutput ?? true; } handleSubmitText(key, sendInChat); }} diff --git a/src/components/ChatBotContainer.tsx b/src/components/ChatBotContainer.tsx index 35a9e683..f7139aa8 100644 --- a/src/components/ChatBotContainer.tsx +++ b/src/components/ChatBotContainer.tsx @@ -1,4 +1,4 @@ -import { MouseEvent } from "react"; +import { MouseEvent, useMemo } from "react"; import ChatBotHeader from "./ChatBotHeader/ChatBotHeader"; import ChatBotBody from "./ChatBotBody/ChatBotBody"; @@ -64,15 +64,15 @@ const ChatBotContainer = ({ /** * Retrieves class name for window state. */ - const getWindowStateClass = () => { + const windowStateClass = useMemo(() => { const windowClass = "rcb-chat-bot "; if (settings.general?.embedded) { return windowClass + "rcb-window-embedded"; } else if (isChatWindowOpen) { return windowClass + "rcb-window-open"; } - return windowClass + "rcb-window-close" - } + return windowClass + "rcb-window-close"; + }, [settings, isChatWindowOpen]); /** * Retrieves styles for chat window. @@ -114,7 +114,7 @@ const ChatBotContainer = ({ // if not on mobile, should remove focus isDesktop ? inputRef.current?.blur() : event?.preventDefault(); }} - className={getWindowStateClass()} + className={windowStateClass} > diff --git a/src/components/ChatBotTooltip/ChatBotTooltip.tsx b/src/components/ChatBotTooltip/ChatBotTooltip.tsx index 8d323f95..0e4b6766 100644 --- a/src/components/ChatBotTooltip/ChatBotTooltip.tsx +++ b/src/components/ChatBotTooltip/ChatBotTooltip.tsx @@ -39,8 +39,8 @@ const ChatBotTooltip = () => { if (isDesktop) { let offset; if (isChatWindowOpen) { - offset = (styles.chatWindowStyle?.width as number || 375) - - (styles.chatButtonStyle?.width as number || 75) + offset = (styles.chatWindowStyle?.width as number ?? 375) - + (styles.chatButtonStyle?.width as number ?? 75) } else { offset = 0; } @@ -71,7 +71,7 @@ const ChatBotTooltip = () => { // styles for tooltip const tooltipStyle: React.CSSProperties = { transform: `translateX(-${tooltipOffset}px)`, - right: (styles.chatButtonStyle?.width as number || 75) + 40, + right: (styles.chatButtonStyle?.width as number ?? 75) + 40, bottom: 30, backgroundColor: settings.general?.secondaryColor, color: settings.general?.secondaryColor, diff --git a/src/context/BotStatesContext.tsx b/src/context/BotStatesContext.tsx index 137d53ed..65a3d18e 100644 --- a/src/context/BotStatesContext.tsx +++ b/src/context/BotStatesContext.tsx @@ -72,11 +72,11 @@ const BotStatesProvider = ({ settings?: Settings; }) => { const [isBotTyping, setIsBotTyping] = useState(false); - const [isChatWindowOpen, setIsChatWindowOpen] = useState(settings?.chatWindow?.defaultOpen || false); - const [audioToggledOn, setAudioToggledOn] = useState(settings?.audio?.defaultToggledOn || false); - const [voiceToggledOn, setVoiceToggledOn] = useState(settings?.voice?.defaultToggledOn || false); + const [isChatWindowOpen, setIsChatWindowOpen] = useState(settings?.chatWindow?.defaultOpen ?? false); + const [audioToggledOn, setAudioToggledOn] = useState(settings?.audio?.defaultToggledOn ?? false); + const [voiceToggledOn, setVoiceToggledOn] = useState(settings?.voice?.defaultToggledOn ?? false); const [notificationsToggledOn, setNotificationsToggledOn] = useState( - settings?.notification?.defaultToggledOn || true + settings?.notification?.defaultToggledOn ?? true ); const [isLoadingChatHistory, setIsLoadingChatHistory] = useState(false); const [isScrolling, setIsScrolling] = useState(false); @@ -91,9 +91,9 @@ const BotStatesProvider = ({ const [timeoutId, setTimeoutId] = useState | null>(null); // tracks view port height and width (for auto-resizing on mobile view) const [viewportHeight, setViewportHeight] = useState(window.visualViewport?.height as number - || window.innerHeight); + ?? window.innerHeight); const [viewportWidth, setViewportWidth] = useState(window.visualViewport?.width as number - || window.innerWidth); + ?? window.innerWidth); return ( { return updatedMessages; }); - return streamMessageMap.current.get(sender) || null; + return streamMessageMap.current.get(sender) ?? null; },[]); /** diff --git a/src/hooks/internal/useNotificationsInternal.ts b/src/hooks/internal/useNotificationsInternal.ts index dd68cd76..26804a2c 100644 --- a/src/hooks/internal/useNotificationsInternal.ts +++ b/src/hooks/internal/useNotificationsInternal.ts @@ -35,7 +35,7 @@ export const useNotificationInternal = () => { const notificationSound = settings.notification?.sound; audioContextRef.current = new AudioContext(); const gainNode = audioContextRef.current.createGain(); - gainNode.gain.value = settings.notification?.volume || 0.2; + gainNode.gain.value = settings.notification?.volume ?? 0.2; gainNodeRef.current = gainNode; let audioSource; diff --git a/src/hooks/internal/useSubmitInputInternal.ts b/src/hooks/internal/useSubmitInputInternal.ts index 5aca003c..5842e1af 100644 --- a/src/hooks/internal/useSubmitInputInternal.ts +++ b/src/hooks/internal/useSubmitInputInternal.ts @@ -78,7 +78,7 @@ export const useSubmitInputInternal = () => { if (settings?.sensitiveInput?.hideInUserBubble) { return; } else if (settings?.sensitiveInput?.maskInUserBubble) { - await injectMessage("*".repeat(settings.sensitiveInput?.asterisksCount as number || 10), "user"); + await injectMessage("*".repeat(settings.sensitiveInput?.asterisksCount as number ?? 10), "user"); return; } } @@ -176,7 +176,7 @@ export const useSubmitInputInternal = () => { */ const handleSubmitText = useCallback(async (inputText?: string, sendInChat = true) => { // if no user input provided, grab from text area - inputText = inputText || inputRef.current?.value as string; + inputText = inputText ?? inputRef.current?.value as string; // handles user send text event if (settings.event?.rcbUserSubmitText) { diff --git a/src/hooks/useFlow.ts b/src/hooks/useFlow.ts index b5f7a2d5..1ae79a24 100644 --- a/src/hooks/useFlow.ts +++ b/src/hooks/useFlow.ts @@ -36,7 +36,7 @@ export const useFlow = () => { * Retrieves the conversation flow for the chatbot. */ const getFlow = () => { - return flowRef.current || {}; + return flowRef.current ?? {}; } return { diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts index 4e360795..ea35be2c 100644 --- a/src/hooks/useToast.ts +++ b/src/hooks/useToast.ts @@ -37,7 +37,7 @@ export const useToast = () => { const currentToasts = toastsRef.current; const numToast = currentToasts.length; - if (numToast >= (settings.toast?.maxCount || 3)) { + if (numToast >= (settings.toast?.maxCount ?? 3)) { if (settings.toast?.forbidOnMax) { return null; } diff --git a/src/services/ChatHistoryService.tsx b/src/services/ChatHistoryService.tsx index 8d997c13..cdba2494 100644 --- a/src/services/ChatHistoryService.tsx +++ b/src/services/ChatHistoryService.tsx @@ -141,7 +141,7 @@ const loadChatHistory = (settings: Settings, styles: Styles, chatHistory: string } return [...parsedMessages, lineBreakMessage, ...prevMessages]; }); - setTextAreaDisabled(settings.chatInput?.disabled || false); + setTextAreaDisabled(settings.chatInput?.disabled ?? false); }, 500) } catch { // remove chat history on error (to address corrupted storage values) @@ -240,8 +240,8 @@ const addStyleToOptions = (classList: DOMTokenList, attributes: {[key: string]: if (classList.contains("rcb-options")) { attributes["style"] = { ...(attributes["style"] as CSSProperties), - color: styles.botOptionStyle?.color || settings.general?.primaryColor, - borderColor: styles.botOptionStyle?.color || settings.general?.primaryColor, + color: styles.botOptionStyle?.color ?? settings.general?.primaryColor, + borderColor: styles.botOptionStyle?.color ?? settings.general?.primaryColor, cursor: `url(${settings.general?.actionDisabledIcon}), auto`, ...styles.botOptionStyle } @@ -261,8 +261,8 @@ const addStyleToCheckboxRows = (classList: DOMTokenList, attributes: {[key: stri if (classList.contains("rcb-checkbox-row-container")) { attributes["style"] = { ...(attributes["style"] as CSSProperties), - color: styles.botCheckboxRowStyle?.color || settings.general?.primaryColor, - borderColor: styles.botCheckboxRowStyle?.color || settings.general?.primaryColor, + color: styles.botCheckboxRowStyle?.color ?? settings.general?.primaryColor, + borderColor: styles.botCheckboxRowStyle?.color ?? settings.general?.primaryColor, cursor: `url(${settings.general?.actionDisabledIcon}), auto`, ...styles.botCheckboxRowStyle } @@ -282,8 +282,8 @@ const addStyleToCheckboxNextButton = (classList: DOMTokenList, attributes: {[key if (classList.contains("rcb-checkbox-next-button")) { attributes["style"] = { ...(attributes["style"] as CSSProperties), - color: styles.botCheckboxNextStyle?.color || settings.general?.primaryColor, - borderColor: styles.botCheckboxNextStyle?.color || settings.general?.primaryColor, + color: styles.botCheckboxNextStyle?.color ?? settings.general?.primaryColor, + borderColor: styles.botCheckboxNextStyle?.color ?? settings.general?.primaryColor, cursor: `url(${settings.general?.actionDisabledIcon}), auto`, ...styles.botCheckboxNextStyle } diff --git a/src/utils/displayChecker.ts b/src/utils/displayChecker.ts index e4bcf35a..7262f1e8 100644 --- a/src/utils/displayChecker.ts +++ b/src/utils/displayChecker.ts @@ -9,8 +9,8 @@ export const isChatBotVisible = (element: HTMLDivElement) => { } const rect = element.getBoundingClientRect(); - const windowHeight = (window.innerHeight || document.documentElement.clientHeight); - const windowWidth = (window.innerWidth || document.documentElement.clientWidth); + const windowHeight = (window.innerHeight ?? document.documentElement.clientHeight); + const windowWidth = (window.innerWidth ?? document.documentElement.clientWidth); return ( rect.top >= 0 &&