Add cancellable progress tracking with elapsed time display for website fetching

Author: robertpiosik

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

@@ -1,4 +1,5 @@
 import * as vscode from 'vscode'
+import axios from 'axios'
 import { PasteUrlMessage } from '../../types/messages'
 import { PanelProvider } from '../panel-provider'
 import * as fs from 'fs'
@@ -31,7 +32,23 @@ export const handle_paste_url = async (
       return
     }
 
-    const content = await fetch_and_save_website(url)
+    const cancel_token_source = axios.CancelToken.source()
+    panel_provider.api_call_cancel_token_source = cancel_token_source
+
+    panel_provider.send_message({
+      command: 'SHOW_PROGRESS',
+      title: 'Fetching website...',
+      show_elapsed_time: true,
+      cancellable: true
+    })
+
+    let content: string | null = null
+    try {
+      content = await fetch_and_save_website(url, cancel_token_source.token)
+    } finally {
+      panel_provider.send_message({ command: 'HIDE_PROGRESS' })
+      panel_provider.api_call_cancel_token_source = null
+    }
 
     if (content) {
       panel_provider.add_text_at_cursor_position(`#Website(${url})`)

apps/editor/src/views/panel/backend/utils/website-fetcher.ts

@@ -1,4 +1,4 @@
-import axios from 'axios'
+import axios, { CancelToken } from 'axios'
 import { JSDOM } from 'jsdom'
 import { Readability, isProbablyReaderable } from '@mozilla/readability'
 import createDOMPurify from 'dompurify'
@@ -99,7 +99,8 @@ export const get_website_file_path = (url: string) => {
 }
 
 export const fetch_and_save_website = async (
-  url: string
+  url: string,
+  cancel_token?: CancelToken
 ): Promise<string | null> => {
   try {
     const file_path = get_website_file_path(url)
@@ -109,7 +110,8 @@ export const fetch_and_save_website = async (
         'User-Agent':
           'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36'
       },
-      timeout: 5000
+      timeout: 5000,
+      cancelToken: cancel_token
     })
 
     if (response.status == 200 && typeof response.data == 'string') {

packages/ui/src/components/editor/panel/modals/ApiManagerModal/ApiManagerModal.tsx

@@ -151,7 +151,7 @@ export const ApiManagerModal: React.FC<Props> = (props) => {
                       {item.total_tokens !== undefined && (
                         <div>({format_tokens(item.total_tokens)})</div>
                       )}
-                      {item.show_elapsed_time !== false && (
+                      {item.show_elapsed_time && (
                         <div>{(elapsed_ms / 1000).toFixed(1)}s</div>
                       )}
                     </div>

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

@@ -56,6 +56,15 @@
   }
 }
 
+.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;
   display: flex;

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

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import cn from 'classnames'
 import { Scrollable } from '../../Scrollable'
 import styles from './Modal.module.scss'
@@ -10,15 +11,34 @@ 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
@@ -47,6 +67,12 @@ 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/panel/modals/ProgressModal/ProgressModal.module.scss

@@ -1,9 +1,3 @@
-.elapsed-time {
-  text-align: center;
-  font-size: 18px;
-  font-variant-numeric: tabular-nums;
-}
-
 .tokens-per-second {
   text-align: center;
   color: var(--cwc-text-color-dimmed);

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

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

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

@@ -22,7 +22,6 @@ const format_tokens_per_second = (tps: number): string => {
 
 export const ProgressModal: React.FC<Props> = (props) => {
   const [is_visible, set_is_visible] = useState(!props.delay_visibility)
-  const [elapsed_time, set_elapsed_time] = useState(0)
 
   useEffect(() => {
     let visibility_timer: NodeJS.Timeout | undefined
@@ -35,58 +34,41 @@ export const ProgressModal: React.FC<Props> = (props) => {
       set_is_visible(true)
     }
 
-    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 () => {
       clearTimeout(visibility_timer)
-      clearInterval(elapsed_time_timer)
     }
-  }, [props.show_elapsed_time, props.delay_visibility])
+  }, [props.delay_visibility])
 
   return is_visible ? (
     <div
       onKeyDown={(e) => {
-        if (e.key === 'Escape') {
+        if (e.key == 'Escape') {
           e.stopPropagation()
           props.on_cancel?.()
         }
       }}
     >
       <Modal
         title={props.title}
+        show_elapsed_time={props.show_elapsed_time}
         content_slot={
-          <>
-            {props.show_elapsed_time !== false && (
-              <div className={styles['elapsed-time']}>
-                {elapsed_time.toFixed(1)}s
+          <div className={styles.content}>
+            {props.tokens_per_second !== undefined && (
+              <div className={styles['tokens-per-second']}>
+                {format_tokens_per_second(props.tokens_per_second)} tokens/s
               </div>
             )}
-
-            <div className={styles.content}>
-              {props.tokens_per_second !== undefined && (
-                <div className={styles['tokens-per-second']}>
-                  {format_tokens_per_second(props.tokens_per_second)} tokens/s
-                </div>
+            <div className={styles.progress}>
+              {props.progress !== undefined ? (
+                <div
+                  className={styles.progress__fill}
+                  style={{ width: `${props.progress}%` }}
+                />
+              ) : (
+                <div className={styles['progress__fill--indeterminate']} />
               )}
-              <div className={styles.progress}>
-                {props.progress !== undefined ? (
-                  <div
-                    className={styles.progress__fill}
-                    style={{ width: `${props.progress}%` }}
-                  />
-                ) : (
-                  <div className={styles['progress__fill--indeterminate']} />
-                )}
-              </div>
             </div>
-          </>
+          </div>
         }
         footer_slot={
           props.on_cancel ? (