diff --git a/src/components/ChatBox/ContactHeader.tsx b/src/components/ChatBox/ContactHeader.tsx
index 9ea3a73..b035c4b 100644
--- a/src/components/ChatBox/ContactHeader.tsx
+++ b/src/components/ChatBox/ContactHeader.tsx
@@ -21,7 +21,7 @@ import { configurationDrawerVisibleState, onlineState } from 'src/stores/global'
 import { EmojiPickerProps } from 'src/types/global'
 import Avatar from '../Avatar'
 import EmojiPicker from '../EmojiPicker'
-import toast from '../Snackbar'
+import Toast from '../Snackbar'
 
 const ContactHeader: FC = () => {
   const loading = useRecoilValue(loadingState)
@@ -51,7 +51,7 @@ const ContactHeader: FC = () => {
 
   const openAvatarPicker = () => {
     if (loading) {
-      toast.warning(BAN_ACTIVE_HINT)
+      Toast.warning(BAN_ACTIVE_HINT)
       return
     }
     setAvatarPickerVisible(true)
@@ -59,7 +59,7 @@ const ContactHeader: FC = () => {
 
   const openSummaryInput = () => {
     if (loading) {
-      toast.warning(BAN_ACTIVE_HINT)
+      Toast.warning(BAN_ACTIVE_HINT)
       return
     }
     if (!currConversation) return
@@ -69,7 +69,7 @@ const ContactHeader: FC = () => {
 
   const openConfigurationDrawer = () => {
     if (loading) {
-      toast.warning(BAN_ACTIVE_HINT)
+      Toast.warning(BAN_ACTIVE_HINT)
       return
     }
     setConfigurationDrawerVisible(true)
@@ -110,7 +110,7 @@ const ContactHeader: FC = () => {
 
   const deleteCurrConversation = async () => {
     if (loading) {
-      toast.warning(BAN_ACTIVE_HINT)
+      Toast.warning(BAN_ACTIVE_HINT)
       return
     }
     if (currConversation) {
diff --git a/src/components/ChatBox/InputBox.tsx b/src/components/ChatBox/InputBox.tsx
index d41a0d4..a1ad92b 100644
--- a/src/components/ChatBox/InputBox.tsx
+++ b/src/components/ChatBox/InputBox.tsx
@@ -63,7 +63,9 @@ const InputBox: FC = () => {
   const handleRequest = () => {
     if (!validate()) return
 
-    requests[currProduct]()
+    if (requests[currProduct]) {
+      requests[currProduct]()
+    }
     resetInput()
   }
 
@@ -122,6 +124,7 @@ const InputBox: FC = () => {
           placeholder="Type a message..."
           value={prompt}
           rows={1}
+          // FIXME: The webkit(safari) doesn't support `onCompositionStart` or `onCompositionEnd`.
           onCompositionStart={() => setIsTyping(true)}
           onCompositionEnd={() => setIsTyping(false)}
           onChange={(e) => setPrompt(e.target.value)}
diff --git a/src/components/ChatBox/Markdown.tsx b/src/components/ChatBox/Markdown.tsx
index c633c76..59ee405 100644
--- a/src/components/ChatBox/Markdown.tsx
+++ b/src/components/ChatBox/Markdown.tsx
@@ -3,6 +3,7 @@ import { FC, memo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark as mdCodeTheme } from 'react-syntax-highlighter/dist/esm/styles/prism'
+// @ts-ignore
 import rehypeMathjax from 'rehype-mathjax'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
diff --git a/src/components/ConversationList/index.tsx b/src/components/ConversationList/index.tsx
index e63ebd1..7bd974b 100644
--- a/src/components/ConversationList/index.tsx
+++ b/src/components/ConversationList/index.tsx
@@ -10,7 +10,7 @@ import { Conversation } from 'src/types/conversation'
 import { v4 } from 'uuid'
 import Divider from '../Divider'
 import { OutlinePlusIcon } from '../Icons'
-import toast from '../Snackbar'
+import Toast from '../Snackbar'
 import ConversationItem from './ConversationItem'
 import ChatEmpty from './EmptyItem'
 
@@ -28,7 +28,7 @@ const ConversationList: FC<Props> = ({ conversations }) => {
 
   const addConversation = async () => {
     if (loading) {
-      toast.warning(BAN_ACTIVE_HINT)
+      Toast.warning(BAN_ACTIVE_HINT)
       return
     }
 
@@ -49,7 +49,7 @@ const ConversationList: FC<Props> = ({ conversations }) => {
 
   const switchConversation = (conversation: Conversation) => {
     if (loading) {
-      toast.warning(BAN_ACTIVE_HINT)
+      Toast.warning(BAN_ACTIVE_HINT)
       return
     }
     setCurrConversation(conversation)
diff --git a/src/components/ImportAndExportDexie/index.tsx b/src/components/ImportAndExportDexie/index.tsx
index 9532daa..00eeca2 100644
--- a/src/components/ImportAndExportDexie/index.tsx
+++ b/src/components/ImportAndExportDexie/index.tsx
@@ -7,7 +7,7 @@ import { BaseDirectory, writeTextFile } from '@tauri-apps/plugin-fs'
 import Dexie from 'dexie'
 import { exportDB, importDB } from 'dexie-export-import'
 import { ChangeEvent, FC, useRef } from 'react'
-import toast from '../Snackbar'
+import Toast from '../Snackbar'
 
 const ImportAndExportDexie: FC = () => {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -22,13 +22,13 @@ const ImportAndExportDexie: FC = () => {
         baseDir: BaseDirectory.Download
       })
 
-      toast.success(
+      Toast.success(
         `The ${filename} has been saved in your local Download Directory.`
       )
     } catch (e) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      toast.error(e.toString())
+      Toast.error(e.toString())
     }
   }
 
@@ -42,7 +42,7 @@ const ImportAndExportDexie: FC = () => {
     } catch (e: unknown) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      toast.error(e.message)
+      Toast.error(e.message)
     } finally {
       if (inputRef.current) {
         inputRef.current.value = ''
diff --git a/src/components/InputSlider/index.tsx b/src/components/InputSlider/index.tsx
index d467c0d..c123a9f 100644
--- a/src/components/InputSlider/index.tsx
+++ b/src/components/InputSlider/index.tsx
@@ -74,19 +74,21 @@ const InputSlider: FC<Props> = ({
         </div>
 
         <TextField
-          InputLabelProps={{ shrink: true }}
+          slotProps={{
+            inputLabel: { shrink: true },
+            htmlInput: {
+              inputMode: 'numeric',
+              pattern: '[0-9]*',
+              step,
+              min,
+              max
+            }
+          }}
           type="number"
           value={value}
           onChange={handleInputChange}
           onBlur={handleBlur}
           size="small"
-          inputProps={{
-            inputMode: 'numeric',
-            pattern: '[0-9]*',
-            step,
-            min,
-            max
-          }}
           sx={{
             width: 100
           }}
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 95d48c7..c833553 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -14,7 +14,7 @@ import { currProductState } from 'src/stores/global'
 import { Companies, Products } from 'src/types/global'
 import Avatar from '../Avatar'
 import Divider from '../Divider'
-import toast from '../Snackbar'
+import Toast from '../Snackbar'
 import items, { iconClassName } from './Items'
 
 const companyLogo = {
@@ -34,7 +34,7 @@ const Sidebar: FC = () => {
 
   const onProductChange = async (e: MouseEvent, product: Products) => {
     if (loading) {
-      toast.warning(BAN_ACTIVE_HINT)
+      Toast.warning(BAN_ACTIVE_HINT)
       return
     }
     window.localStorage.setItem('currProductState', product)
diff --git a/src/components/Snackbar/index.tsx b/src/components/Snackbar/index.tsx
index c17d78f..95ac3be 100644
--- a/src/components/Snackbar/index.tsx
+++ b/src/components/Snackbar/index.tsx
@@ -19,22 +19,22 @@ export const SnackbarUtilsConfig = () => {
   return <InnerSnackbarUtilsConfig setUseSnackbarRef={setUseSnackbarRef} />
 }
 
-const toast = {
+const Toast = {
   success(msg: string) {
-    this.toast(msg, 'success')
+    this.Toast(msg, 'success')
   },
   warning(msg: string) {
-    this.toast(msg, 'warning')
+    this.Toast(msg, 'warning')
   },
   info(msg: string) {
-    this.toast(msg, 'info')
+    this.Toast(msg, 'info')
   },
   error(msg: string) {
-    this.toast(msg, 'error')
+    this.Toast(msg, 'error')
   },
-  toast(msg: string, variant: VariantType = 'default') {
+  Toast(msg: string, variant: VariantType = 'default') {
     useSnackbarRef.enqueueSnackbar(msg, { variant })
   }
 }
 
-export default toast
+export default Toast
diff --git a/src/containers/Settings/index.tsx b/src/containers/Settings/index.tsx
index 2dd202e..7c788b2 100644
--- a/src/containers/Settings/index.tsx
+++ b/src/containers/Settings/index.tsx
@@ -18,7 +18,7 @@ import { ChangeEvent, FC } from 'react'
 import ChatGPTImg from 'src/assets/chatbot.png'
 import { SolidSettingsBrightnessIcon } from 'src/components/Icons'
 import ImportAndExportDexie from 'src/components/ImportAndExportDexie'
-import toast from 'src/components/Snackbar'
+import Toast from 'src/components/Snackbar'
 import { useAppData, useSettings, useTheme } from 'src/hooks'
 import { Companies, ThemeMode } from 'src/types/global'
 import { Settings as SettingsParams } from 'src/types/settings'
@@ -36,7 +36,7 @@ const Settings: FC = () => {
       const filename = await saveFileToAppDataDir(file)
       if (filename) {
         updateSettings({ ...settings, assistantAvatarFilename: filename })
-        toast.success('Assistant avatar updated successfully.')
+        Toast.success('Assistant avatar updated successfully.')
       }
     }
   }
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index add07ed..201e0f9 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
-import toast from 'src/components/Snackbar'
+import Toast from 'src/components/Snackbar'
 import { useDB } from 'src/hooks'
 import { settingsState } from 'src/stores/settings'
 import { Companies, ThemeMode } from 'src/types/global'
@@ -52,7 +52,7 @@ const useSettings = () => {
       setSettings(newSettings)
     }
 
-    toast.success('Settings updated successfully.')
+    Toast.success('Settings updated successfully.')
   }
 
   const getSettings = async () => {
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index e9bbef1..56e54dc 100644
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@@ -1,6 +1,6 @@
 import { encodingForModel, TiktokenModel } from 'js-tiktoken'
 import { DateTime } from 'luxon'
-import toast from 'src/components/Snackbar'
+import Toast from 'src/components/Snackbar'
 import { Products, ThemeMode } from 'src/types/global'
 import { v4 } from 'uuid'
 import { getFileExtension } from 'yancey-js-util'
@@ -59,4 +59,4 @@ export const getTokensCount = (content: string, model: TiktokenModel) =>
 
 // Output a simple error if request failed.
 // TODO: Output the error message thrown by the OpenAI or Azure API.
-export const showApiRequestErrorToast = () => toast.error(`Request failed.`)
+export const showApiRequestErrorToast = () => Toast.error(`Request failed.`)