Rename ChatInitializedModal to AutoClosingModal and refactor ProgressModal to support optional cancellation and elapsed time display, improving UI component flexibility and checkpoint restoration feedback

Author: robertpiosik

…edModal/ChatInitializedModal.module.scss …losingModal/AutoClosingModal.module.scsspackages/ui/src/components/editor/panel/modals/ChatInitializedModal/ChatInitializedModal.module.scss renamed to packages/ui/src/components/editor/panel/modals/AutoClosingModal/AutoClosingModal.module.scss packages/ui/src/components/editor/panel/modals/ChatInitializedModal/ChatInitializedModal.module.scss renamed to packages/ui/src/components/editor/panel/modals/AutoClosingModal/AutoClosingModal.module.scss

@@ -1,8 +1,8 @@
 import { useState } from 'react'
-import { ChatInitializedModal } from './ChatInitializedModal'
+import { AutoClosingModal } from './AutoClosingModal'
 
 export default {
-  component: ChatInitializedModal
+  component: AutoClosingModal
 }
 
 export const Default = () => {
@@ -13,7 +13,7 @@ export const Default = () => {
   }
 
   return visible ? (
-    <ChatInitializedModal
+    <AutoClosingModal
       title="Chat has been initialized in the connected browser"
       duration={3000}
       on_close={handle_close}

…edModal/ChatInitializedModal.stories.tsx …losingModal/AutoClosingModal.stories.tsxpackages/ui/src/components/editor/panel/modals/ChatInitializedModal/ChatInitializedModal.stories.tsx renamed to packages/ui/src/components/editor/panel/modals/AutoClosingModal/AutoClosingModal.stories.tsx packages/ui/src/components/editor/panel/modals/ChatInitializedModal/ChatInitializedModal.stories.tsx renamed to packages/ui/src/components/editor/panel/modals/AutoClosingModal/AutoClosingModal.stories.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import styles from './ChatInitializedModal.module.scss'
+import styles from './AutoClosingModal.module.scss'
 import { Button } from '../../Button'
 import { Modal } from '../Modal'
 
@@ -9,7 +9,7 @@ type Props = {
   on_close: () => void
 }
 
-export const ChatInitializedModal: React.FC<Props> = (props) => {
+export const AutoClosingModal: React.FC<Props> = (props) => {
   const [is_filling, set_is_filling] = useState(false)
 
   useEffect(() => {

…nitializedModal/ChatInitializedModal.tsx …ls/AutoClosingModal/AutoClosingModal.tsxpackages/ui/src/components/editor/panel/modals/ChatInitializedModal/ChatInitializedModal.tsx renamed to packages/ui/src/components/editor/panel/modals/AutoClosingModal/AutoClosingModal.tsx packages/ui/src/components/editor/panel/modals/ChatInitializedModal/ChatInitializedModal.tsx renamed to packages/ui/src/components/editor/panel/modals/AutoClosingModal/AutoClosingModal.tsx

@@ -0,0 +1 @@
+export * from './AutoClosingModal'

packages/ui/src/components/editor/panel/modals/AutoClosingModal/index.ts

@@ -17,6 +17,10 @@ export const Indeterminate = () => {
   ) : null
 }
 
+export const NonCancellable = () => {
+  return <ProgressModal title="Restoring checkpoint..." progress={50} />
+}
+
 export const WithProgress = () => {
   const [visible, set_visible] = useState(true)
   const [progress, set_progress] = useState(0)

packages/ui/src/components/editor/panel/modals/ChatInitializedModal/index.ts

@@ -21,10 +21,11 @@ export type FileProgress = {
 
 type Props = {
   title: string
-  on_cancel: () => void
+  on_cancel?: () => void
   progress?: number
   tokens_per_second?: number
   files?: FileProgress[]
+  show_elapsed_time?: boolean
 }
 
 const format_tokens_per_second = (tps: number): string => {
@@ -51,27 +52,41 @@ const get_status_text = (status: FileProgressStatus): string => {
 }
 
 export const ProgressModal: React.FC<Props> = (props) => {
+  const [is_visible, set_is_visible] = useState(false)
   const [elapsed_time, set_elapsed_time] = useState(0)
 
   useEffect(() => {
-    set_elapsed_time(0)
-    const start_time = Date.now()
-    const timer = setInterval(() => {
-      set_elapsed_time((Date.now() - start_time) / 1000)
-    }, 100)
+    set_is_visible(false)
+    const visibility_timer = setTimeout(() => {
+      set_is_visible(true)
+    }, 1000)
 
-    return () => clearInterval(timer)
-  }, [props.title])
+    let elapsed_time_timer: NodeJS.Timeout | undefined
+    if (props.show_elapsed_time !== false) {
+      set_elapsed_time(0)
+      const start_time = Date.now()
+      elapsed_time_timer = setInterval(() => {
+        set_elapsed_time((Date.now() - start_time) / 1000)
+      }, 100)
+    }
 
-  return (
+    return () => {
+      clearTimeout(visibility_timer)
+      clearInterval(elapsed_time_timer)
+    }
+  }, [props.title, props.show_elapsed_time])
+
+  return is_visible ? (
     <Modal
       title={props.title}
       content_max_height={props.files ? 'calc(100vh - 150px)' : undefined}
       content_slot={
         <>
-          <div className={styles['elapsed-time']}>
-            {elapsed_time.toFixed(1)}s
-          </div>
+          {props.show_elapsed_time !== false && (
+            <div className={styles['elapsed-time']}>
+              {elapsed_time.toFixed(1)}s
+            </div>
+          )}
 
           {props.files ? (
             <div className={styles.content}>
@@ -161,7 +176,11 @@ export const ProgressModal: React.FC<Props> = (props) => {
           )}
         </>
       }
-      footer_slot={<Button on_click={props.on_cancel}>Cancel</Button>}
+      footer_slot={
+        props.on_cancel ? (
+          <Button on_click={props.on_cancel}>Cancel</Button>
+        ) : undefined
+      }
     />
-  )
+  ) : null
 }