Only show Help modal automatically every 3 mintues

- user who choose to refresh the page wont have to keep seeing the modal

src/components/Drawer.tsx

@@ -10,21 +10,14 @@ import ModalSelector from './ModalSelector'
 import ThemeSelector from './ThemeSelector'
 import { SideBar } from './SideBar'
 
-const openNoServerDialog = () => {
-  const noServerDialog: HTMLDialogElement | undefined = document.getElementById(
-    'help-modal',
-  ) as HTMLDialogElement
-
-  noServerDialog?.showModal()
-}
-
 const Input = observer(() => {
   return (
     <div className="form-control">
       <div className="label pb-1 pt-0">
         <span className="label-text flex flex-row items-center gap-2 text-sm">
           Host:
-          <div className="cursor-pointer" onClick={openNoServerDialog}>
+
+          <div className="cursor-pointer" onClick={() => settingStore.openUpdateModal({fromUser: true})}>
             <Question />
           </div>
         </span>

src/components/HelpModal.tsx

@@ -25,12 +25,16 @@ const HelpModal = observer(() => {
     if (selectedModel) return
 
     let timeout = setTimeout(() => {
-      modalRef.current?.showModal()
+      settingStore.openUpdateModal({ fromUser: false })
     }, 1500)
 
     return () => clearTimeout(timeout)
   }, [selectedModel])
 
+  useEffect(() => {
+    settingStore.setHelpModalRef(modalRef)
+  }, [modalRef])
+
   return (
     <dialog ref={modalRef} id="help-modal" className="modal">
       <div className="modal-box-container">

src/models/SettingStore.ts

@@ -3,6 +3,7 @@ import { persist } from 'mst-persist'
 import _ from 'lodash'
 
 import { toastStore } from './ToastStore'
+import { RefObject } from 'react'
 
 const Model = types.model({
   name: types.identifier,
@@ -14,18 +15,35 @@ export interface IModel extends Instance<typeof Model> {}
 
 export const DefaultHost = 'http://localhost:11434'
 
+const min_3 = 3 * 60 * 1000
+
 export const SettingStore = types
   .model({
     host: types.maybe(types.string),
     models: types.optional(types.array(Model), []),
     _selectedModelName: types.maybeNull(types.string),
     theme: types.optional(types.string, '_system'),
     pwaNeedsUpdate: types.optional(types.boolean, true),
+    lastHelpModalNotificationTime: types.optional(types.number, () => Date.now()),
   })
   .actions(self => {
     let updateServiceWorker: undefined | (() => void)
+    let helpModalRef: RefObject<HTMLDialogElement>
 
     return {
+      setHelpModalRef(nextHelpModalRef: RefObject<HTMLDialogElement>) {
+        helpModalRef = nextHelpModalRef
+      },
+
+      openUpdateModal({ fromUser }: { fromUser: boolean }) {
+        const now = Date.now()
+
+        if (fromUser || now - self.lastHelpModalNotificationTime > min_3) {
+          helpModalRef.current?.showModal()
+          self.lastHelpModalNotificationTime = now
+        }
+      },
+
       selectModel(name: string) {
         self._selectedModelName = name
       },