Add a "New checkpoint..." button to the Timeline component for easier checkpoint creation

Author: robertpiosik

packages/ui/src/components/editor/panel/Responses/Responses.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react'
 import cn from 'classnames'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ResponseHistoryItem } from '@shared/types/response-history-item'
+import { use_periodic_re_render } from '../../../../hooks/use-periodic-re-render'
 import styles from './Responses.module.scss'
 
 dayjs.extend(relativeTime)
@@ -17,16 +17,7 @@ type Props = {
 
 export const Responses: React.FC<Props> = (props) => {
   // Re-render every minute to update the relative time of the history responses.
-  const [, set_now] = useState(Date.now())
-  useEffect(() => {
-    const interval = setInterval(() => {
-      set_now(Date.now())
-    }, 60 * 1000)
-
-    return () => {
-      clearInterval(interval)
-    }
-  }, [])
+  use_periodic_re_render(60 * 1000)
 
   if (props.response_history.length == 0) {
     return null

packages/ui/src/components/editor/panel/Timeline/Timeline.module.scss

@@ -75,6 +75,7 @@
   &__line {
     width: 1px;
     flex-grow: 1;
+    margin: 0 9px;
     background-color: var(--cwc-border-color-dimmed);
   }
 

packages/ui/src/components/editor/panel/Timeline/Timeline.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
+import { use_periodic_re_render } from '../../../../hooks/use-periodic-re-render'
 
 dayjs.extend(relativeTime)
 dayjs.extend(localizedFormat)
@@ -19,15 +20,36 @@ type Props = {
   items: TimelineItemProps[]
   on_toggle_starred: (id: string | number) => void
   on_label_click: (id: string | number) => void
+  on_create_click?: () => void
 }
 
 export const Timeline: React.FC<Props> = ({
   items,
   on_toggle_starred,
-  on_label_click
+  on_label_click,
+  on_create_click
 }) => {
+  // Re-render every minute to update the relative time of the timeline items.
+  use_periodic_re_render(60 * 1000)
+
   return (
     <div className={styles.timeline}>
+      {on_create_click && (
+        <div className={styles.item}>
+          <div className={styles.item__time} />
+          <div className={styles.item__connector}>
+            <div className={styles.item__line} />
+          </div>
+          <div className={styles.item__content}>
+            <div
+              className={styles.item__content__label}
+              onClick={on_create_click}
+            >
+              New checkpoint...
+            </div>
+          </div>
+        </div>
+      )}
       {items.map((item) => (
         <div key={item.id} className={styles.item}>
           <div

packages/ui/src/hooks/use-periodic-re-render.ts

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react'
+
+export function use_periodic_re_render(ms: number) {
+  const [, set_now] = useState(Date.now())
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      set_now(Date.now())
+    }, ms)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [ms])
+}

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

@@ -29,7 +29,7 @@ export const checkpoints_command = (params: {
   websites_provider: WebsitesProvider
   panel_provider: PanelProvider
 }): vscode.Disposable[] => {
-  let activeDeleteOperation: {
+  let active_delete_operation: {
     finalize: () => Promise<void>
     timestamp: number
   } | null = null
@@ -53,14 +53,16 @@ export const checkpoints_command = (params: {
         params.websites_provider
       )
       if (checkpoint) {
-        vscode.commands.executeCommand('codeWebChat.checkpoints')
+        vscode.commands.executeCommand('codeWebChat.checkpoints', {
+          highlight_checkpoint: checkpoint
+        })
       }
     }
   )
 
   const checkpoints_command = vscode.commands.registerCommand(
     'codeWebChat.checkpoints',
-    async () => {
+    async (args?: { highlight_checkpoint?: Checkpoint }) => {
       if (
         !vscode.workspace.workspaceFolders ||
         vscode.workspace.workspaceFolders.length == 0
@@ -72,6 +74,7 @@ export const checkpoints_command = (params: {
       }
 
       const show_quick_pick = async () => {
+        let checkpoint_to_highlight = args?.highlight_checkpoint
         const quick_pick = vscode.window.createQuickPick<
           vscode.QuickPickItem & { id?: string; checkpoint?: Checkpoint }
         >()
@@ -196,6 +199,17 @@ export const checkpoints_command = (params: {
           }
 
           update_view()
+          if (checkpoint_to_highlight) {
+            const item = quick_pick.items.find(
+              (i) =>
+                (i as any).checkpoint?.timestamp ===
+                checkpoint_to_highlight?.timestamp
+            )
+            if (item) {
+              quick_pick.activeItems = [item]
+              checkpoint_to_highlight = undefined
+            }
+          }
           quick_pick.busy = false
         }
 
@@ -214,7 +228,9 @@ export const checkpoints_command = (params: {
               params.websites_provider
             )
             if (checkpoint) {
-              vscode.commands.executeCommand('codeWebChat.checkpoints')
+              vscode.commands.executeCommand('codeWebChat.checkpoints', {
+                highlight_checkpoint: checkpoint
+              })
             }
           } else if (selected.id == 'revert-last') {
             quick_pick.hide()
@@ -271,6 +287,7 @@ export const checkpoints_command = (params: {
             )
 
             if (confirmation == 'Clear All') {
+              active_delete_operation = null
               await clear_all_checkpoints(params.context, params.panel_provider)
               vscode.window.showInformationMessage(
                 dictionary.information_message.ALL_CHECKPOINTS_CLEARED
@@ -318,6 +335,7 @@ export const checkpoints_command = (params: {
           if (e.button.tooltip == 'Edit Description') {
             notification_count++
             const new_description = await vscode.window.showInputBox({
+              title: 'Description',
               prompt: 'Enter a description for the checkpoint',
               value: item.checkpoint.description || '',
               placeHolder: 'e.g. Before refactoring the main component'
@@ -353,8 +371,8 @@ export const checkpoints_command = (params: {
           }
 
           if (e.button.tooltip == 'Delete') {
-            if (activeDeleteOperation) {
-              await activeDeleteOperation.finalize()
+            if (active_delete_operation) {
+              await active_delete_operation.finalize()
             }
 
             const deleted_checkpoint = item.checkpoint
@@ -398,7 +416,7 @@ export const checkpoints_command = (params: {
                 }
               }
             }
-            activeDeleteOperation = currentOperation
+            active_delete_operation = currentOperation
 
             notification_count++
             const choice = await vscode.window.showInformationMessage(
@@ -410,16 +428,22 @@ export const checkpoints_command = (params: {
             notification_count--
 
             if (
-              activeDeleteOperation &&
-              activeDeleteOperation.timestamp === currentOperation.timestamp
+              active_delete_operation &&
+              active_delete_operation.timestamp === currentOperation.timestamp
             ) {
               if (choice == 'Undo') {
                 // Restore to state and UI
-                checkpoints.splice(
-                  real_index_in_state,
-                  0,
-                  original_checkpoint_from_state
-                )
+                const current_checkpoints =
+                  params.context.workspaceState.get<Checkpoint[]>(
+                    CHECKPOINTS_STATE_KEY,
+                    []
+                  ) ?? []
+
+                current_checkpoints.push(original_checkpoint_from_state)
+                current_checkpoints.sort((a, b) => b.timestamp - a.timestamp)
+
+                checkpoints = current_checkpoints
+
                 await params.context.workspaceState.update(
                   CHECKPOINTS_STATE_KEY,
                   checkpoints
@@ -434,10 +458,20 @@ export const checkpoints_command = (params: {
                     notification_count--
                   })
                 update_view()
+                const restored_item = quick_pick.items.find(
+                  (i) =>
+                    (i as any).checkpoint?.timestamp ==
+                    original_checkpoint_from_state.timestamp
+                )
+                if (restored_item) {
+                  quick_pick.activeItems = [restored_item]
+                }
+                quick_pick.show()
               } else {
                 await currentOperation.finalize()
+                quick_pick.dispose()
               }
-              activeDeleteOperation = null
+              active_delete_operation = null
             } else if (choice === 'Undo') {
               notification_count++
               vscode.window
@@ -448,9 +482,9 @@ export const checkpoints_command = (params: {
                 .then(() => {
                   notification_count--
                 })
+              quick_pick.show()
             }
 
-            quick_pick.show()
             return
           }
         })

packages/vscode/src/commands/checkpoints-command/checkpoints-command.ts

@@ -0,0 +1,24 @@
+import * as vscode from 'vscode'
+import { create_checkpoint } from '@/commands/checkpoints-command/actions'
+import type { PanelProvider } from '../panel-provider'
+import { dictionary } from '@shared/constants/dictionary'
+
+export const handle_create_checkpoint = async (
+  panel_provider: PanelProvider
+) => {
+  if (
+    !vscode.workspace.workspaceFolders ||
+    vscode.workspace.workspaceFolders.length == 0
+  ) {
+    vscode.window.showErrorMessage(
+      dictionary.error_message.CHECKPOINTS_ONLY_IN_WORKSPACE
+    )
+    return
+  }
+  await create_checkpoint(
+    panel_provider.workspace_provider,
+    panel_provider.context,
+    panel_provider,
+    panel_provider.websites_provider
+  )
+}

packages/vscode/src/views/panel/backend/message-handlers/handle-create-checkpoint.ts

@@ -1,6 +1,7 @@
 export * from './handle-copy-prompt'
 export * from './handle-apply-response-from-history'
 export * from './handle-create-preset'
+export * from './handle-create-checkpoint'
 export * from './handle-create-group'
 export * from './handle-create-separator'
 export * from './handle-delete-preset'

packages/vscode/src/views/panel/backend/message-handlers/index.ts

@@ -18,6 +18,7 @@ import {
   handle_send_prompt,
   handle_update_preset,
   handle_delete_preset,
+  handle_create_checkpoint,
   handle_delete_group,
   handle_delete_separator,
   handle_duplicate_preset,
@@ -425,6 +426,8 @@ export class PanelProvider implements vscode.WebviewViewProvider {
         try {
           if (message.command == 'GET_CHECKPOINTS') {
             await this.send_checkpoints()
+          } else if (message.command == 'CREATE_CHECKPOINT') {
+            await handle_create_checkpoint(this)
           } else if (message.command == 'TOGGLE_CHECKPOINT_STAR') {
             await toggle_checkpoint_star({
               context: this.context,

packages/vscode/src/views/panel/backend/panel-provider.ts

@@ -36,6 +36,12 @@ export const Home: React.FC<Props> = (props) => {
     } as FrontendMessage)
   }
 
+  const handle_create_checkpoint_click = () => {
+    post_message(props.vscode, {
+      command: 'CREATE_CHECKPOINT'
+    } as FrontendMessage)
+  }
+
   return (
     <>
       <div className={styles.header}>
@@ -108,6 +114,7 @@ export const Home: React.FC<Props> = (props) => {
                 on_label_click={(id) =>
                   props.on_restore_checkpoint(id as number)
                 }
+                on_create_click={handle_create_checkpoint_click}
               />
             </div>
           </div>