Remove elapsed time display from progress modals

- remove elapsed time

Author: robertpiosik

apps/editor/src/views/prompt/backend/message-handlers/handle-paste-url.ts

@@ -37,7 +37,6 @@ export const handle_paste_url = async (
     prompt_view_provider.send_message({
       command: 'SHOW_PROGRESS',
       title: 'Fetching website...',
-      show_elapsed_time: true,
       cancellable: true
     })
 

apps/editor/src/views/prompt/backend/message-handlers/handle-voice-input.ts

@@ -164,7 +164,6 @@ const stop_recording = async (prompt_view_provider: PromptViewProvider) => {
       prompt_view_provider.send_message({
         command: 'SHOW_PROGRESS',
         title: t('views.prompt.handlers.voice-input.progress.transcribing'),
-        show_elapsed_time: true,
         cancellable: true
       })
 

apps/editor/src/views/prompt/frontend/Prompt.tsx

@@ -721,7 +721,6 @@ export const Prompt = () => {
               subtitle={progress_state.subtitle}
               progress={progress_state.progress}
               tokens_per_second={progress_state.tokens_per_second}
-              show_elapsed_time={progress_state.show_elapsed_time}
               delay_visibility={progress_state.delay_visibility}
               on_cancel={
                 progress_state.cancellable

apps/editor/src/views/prompt/frontend/hooks/use-modal-manager.ts

@@ -8,7 +8,6 @@ export const use_modal_manager = () => {
     progress?: number
     tokens_per_second?: number
     cancellable?: boolean
-    show_elapsed_time?: boolean
     delay_visibility?: boolean
   }>()
 
@@ -54,7 +53,6 @@ export const use_modal_manager = () => {
           progress: message.progress,
           tokens_per_second: message.tokens_per_second,
           cancellable: message.cancellable ?? false,
-          show_elapsed_time: message.show_elapsed_time,
           delay_visibility: message.delay_visibility
         })
       } else if (message.command == 'HIDE_PROGRESS') {

apps/editor/src/views/prompt/types/messages.ts

@@ -777,7 +777,6 @@ export interface ShowProgressMessage extends BaseMessage {
   progress?: number
   tokens_per_second?: number
   cancellable?: boolean
-  show_elapsed_time?: boolean
   delay_visibility?: boolean
 }
 

packages/ui/src/components/editor/prompt/modals/Modal/Modal.module.scss

@@ -56,14 +56,6 @@
   }
 }
 
-.elapsed-time {
-  position: absolute;
-  top: 5px;
-  right: 7px;
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-  color: var(--cwc-text-color-dimmed);
-}
 
 .content {
   padding: 8px 12px 12px 12px;

packages/ui/src/components/editor/prompt/modals/Modal/Modal.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import cn from 'classnames'
 import { Scrollable } from '../../../common/Scrollable'
 import styles from './Modal.module.scss'
@@ -10,34 +9,15 @@ type Props = {
   content_max_height?: string
   use_full_width?: boolean
   on_background_click?: () => void
-  show_elapsed_time?: boolean
 }
 
 export const Modal: React.FC<Props> = (props) => {
-  const [elapsed_time, set_elapsed_time] = useState(0)
-
   const handle_background_click = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target == e.currentTarget) {
       props.on_background_click?.()
     }
   }
 
-  useEffect(() => {
-    let elapsed_time_timer: NodeJS.Timeout | undefined
-
-    if (props.show_elapsed_time) {
-      set_elapsed_time(0)
-      const start_time = Date.now()
-      elapsed_time_timer = setInterval(() => {
-        set_elapsed_time((Date.now() - start_time) / 1000)
-      }, 100)
-    }
-
-    return () => {
-      if (elapsed_time_timer) clearInterval(elapsed_time_timer)
-    }
-  }, [props.show_elapsed_time])
-
   return (
     <div className={styles.overlay} onClick={handle_background_click}>
       <div
@@ -55,12 +35,6 @@ export const Modal: React.FC<Props> = (props) => {
           </div>
         )}
 
-        {props.show_elapsed_time && (
-          <div className={styles['elapsed-time']}>
-            {elapsed_time.toFixed(1)}s
-          </div>
-        )}
-
         {props.content_slot &&
           (props.content_max_height ? (
             <div className={styles.scrollable}>

packages/ui/src/components/editor/prompt/modals/ProgressModal/ProgressModal.stories.tsx

@@ -51,7 +51,6 @@ export const WithProgress = () => {
       subtitle="Receiving..."
       progress={progress}
       tokens_per_second={250}
-      show_elapsed_time={true}
       on_cancel={handle_cancel}
     />
   ) : null

packages/ui/src/components/editor/prompt/modals/ProgressModal/ProgressModal.tsx

@@ -9,7 +9,6 @@ type Props = {
   on_cancel?: () => void
   progress?: number
   tokens_per_second?: number
-  show_elapsed_time?: boolean
   delay_visibility?: boolean
 }
 
@@ -51,7 +50,6 @@ export const ProgressModal: React.FC<Props> = (props) => {
     >
       <Modal
         title={props.title}
-        show_elapsed_time={props.show_elapsed_time}
         content_slot={
           <div className={styles.content}>
             {props.subtitle && (