Update AutoClosingModal to support icons and add success icon to initialization messages

Author: robertpiosik

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

@@ -14,9 +14,10 @@ export const Default = () => {
 
   return visible ? (
     <AutoClosingModal
-      title="Chat has been initialized in the connected browser"
+      title="Initialized in the connected browser"
       duration={3000}
       on_close={handle_close}
+      icon='success'
     />
   ) : null
 }

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

@@ -6,6 +6,7 @@ import { Modal } from '../Modal'
 type Props = {
   title: string
   duration: number
+  icon?: 'success' | 'warning'
   on_close: () => void
 }
 
@@ -26,6 +27,7 @@ export const AutoClosingModal: React.FC<Props> = (props) => {
   return (
     <Modal
       title={props.title}
+      icon={props.icon}
       content_slot={
         <div className={styles.progress}>
           <div

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

@@ -21,6 +21,22 @@
   }
 }
 
+.icon {
+  font-size: 30px !important;
+  text-align: center;
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+
+  &--success {
+    color: var(--vscode-testing-iconPassed);
+  }
+
+  &--warning {
+    color: var(--vscode-list-warningForeground);
+  }
+}
+
 .title {
   text-align: center;
   font-weight: 500;

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

@@ -4,6 +4,7 @@ import styles from './Modal.module.scss'
 
 type Props = {
   title?: string
+  icon?: 'success' | 'warning'
   content_slot?: React.ReactNode
   footer_slot?: React.ReactNode
   content_max_height?: string
@@ -25,6 +26,17 @@ export const Modal: React.FC<Props> = (props) => {
           [styles['container--full-width']]: props.use_full_width
         })}
       >
+        {props.icon && (
+          <div
+            className={cn(styles.icon, 'codicon', {
+              'codicon-check': props.icon == 'success',
+              'codicon-warning': props.icon == 'warning',
+              [styles['icon--success']]: props.icon == 'success',
+              [styles['icon--warning']]: props.icon == 'warning'
+            })}
+          />
+        )}
+
         {props.title && <div className={styles.title}>{props.title}</div>}
 
         {props.content_slot &&

packages/vscode/src/commands/checkpoints-command/actions/restore-checkpoint.ts

@@ -551,7 +551,7 @@ export const restore_checkpoint = async (params: {
     if (params.options?.show_auto_closing_modal_on_success) {
       params.panel_provider.send_message({
         command: 'SHOW_AUTO_CLOSING_MODAL',
-        title: message
+        title: message.slice(0, -1)
       })
     } else if (temp_checkpoint) {
       const action = await vscode.window.showInformationMessage(

packages/vscode/src/constants/edit-format-instructions.ts

@@ -47,14 +47,21 @@ Updated the greeting text.
 \`\`\``
 
 export const EDIT_FORMAT_INSTRUCTIONS_BEFORE_AFTER = `${intro}, followed by a markdown code block showing the original and updated code snippets with Git-style merge conflict markers. Example:
-Updated the greeting text.
+Changed greeting to wishes.
 
 ### Updated file: \`src/examples/hello.py\`
 
 \`\`\`python
 <<<<<<< ORIGINAL
 GREETING = "Welcome everyone!"
 =======
-GREETING = "Hello, World!"
+WISHES = "Have a nice day!"
+>>>>>>> UPDATED
+<<<<<<< ORIGINAL
+ def show_greeting():
+   print(GREETING)
+=======
+ def show_wishes():
+   print(WISHES)
 >>>>>>> UPDATED
 \`\`\``

packages/vscode/src/utils/files-collector.ts

@@ -52,16 +52,16 @@ export class FilesCollector {
 
     const context_files = [...new Set(context_files_list)]
     const now = Date.now()
-    const ONE_HOUR = 60 * 60 * 1000
+    const THREE_HOURS = 3 * 60 * 60 * 1000
 
     // Recently modified files are placed at the end for better cache efficiency
     context_files.sort((a, b) => {
       try {
         const mtime_a = fs.statSync(a).mtime.getTime()
         const mtime_b = fs.statSync(b).mtime.getTime()
 
-        const is_recent_a = now - mtime_a < ONE_HOUR
-        const is_recent_b = now - mtime_b < ONE_HOUR
+        const is_recent_a = now - mtime_a < THREE_HOURS
+        const is_recent_b = now - mtime_b < THREE_HOURS
 
         if (is_recent_a != is_recent_b) {
           return is_recent_a ? 1 : -1

packages/vscode/src/views/panel/backend/message-handlers/handle-send-prompt.ts

@@ -212,7 +212,7 @@ export const handle_send_prompt = async (params: {
           processed_instructions = await replace_saved_context_placeholder({
             instruction: processed_instructions,
             context: params.panel_provider.context,
-            workspace_provider: params.panel_provider.workspace_provider,
+            workspace_provider: params.panel_provider.workspace_provider
           })
         }
 
@@ -267,10 +267,7 @@ export const handle_send_prompt = async (params: {
 
   params.panel_provider.send_message({
     command: 'SHOW_AUTO_CLOSING_MODAL',
-    title:
-      resolved_preset_names.length > 1
-        ? 'Chats have been initialized in the connected browser'
-        : 'Chat has been initialized in the connected browser'
+    title: 'Initialized in the connected browser'
   })
 }
 

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -542,6 +542,7 @@ export const Panel = () => {
             <UiAutoClosingModal
               title={auto_closing_modal_title}
               duration={3000}
+              icon="success"
               on_close={() => {
                 set_auto_closing_modal_title(undefined)
               }}