Add editable prefix field for prune context instructions

Author: robertpiosik

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

@@ -34,6 +34,10 @@
   }
 }
 
+.input-wrapper {
+  position: relative;
+}
+
 .error {
   position: absolute;
   z-index: 2;
@@ -92,6 +96,20 @@
   }
 }
 
+.prune-context-prefix {
+  padding: var(--padding);
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid var(--cwc-border-color);
+  resize: none;
+  color: var(--vscode-descriptionForeground);
+  overflow: hidden;
+
+  &:focus {
+    outline: none;
+  }
+}
+
 .clear-button {
   position: absolute;
   top: 0;

packages/ui/src/components/editor/panel/PromptField/PromptField.stories.tsx

@@ -28,7 +28,11 @@ export const Empty = () => (
     on_invocation_count_change={(count) =>
       console.log('Invocation count changed:', count)
     }
-    prune_context_instructions=""
+    on_go_to_file={(path) => console.log('Go to file:', path)}
+    prune_context_instructions_prefix=""
+    on_prune_context_instructions_prefix_change={(val) =>
+      console.log('Prune prefix changed:', val)
+    }
   />
 )
 
@@ -55,7 +59,11 @@ export const WithText = () => (
     on_invocation_count_change={(count) =>
       console.log('Invocation count changed:', count)
     }
-    prune_context_instructions=""
+    on_go_to_file={(path) => console.log('Go to file:', path)}
+    prune_context_instructions_prefix=""
+    on_prune_context_instructions_prefix_change={(val) =>
+      console.log('Prune prefix changed:', val)
+    }
   />
 )
 
@@ -82,7 +90,11 @@ export const LongText = () => (
     on_invocation_count_change={(count) =>
       console.log('Invocation count changed:', count)
     }
-    prune_context_instructions=""
+    on_go_to_file={(path) => console.log('Go to file:', path)}
+    prune_context_instructions_prefix=""
+    on_prune_context_instructions_prefix_change={(val) =>
+      console.log('Prune prefix changed:', val)
+    }
   />
 )
 
@@ -108,8 +120,12 @@ export const WithPlaceholderSavedContext = () => (
     on_invocation_count_change={(count) =>
       console.log('Invocation count changed:', count)
     }
+    on_go_to_file={(path) => console.log('Go to file:', path)}
     on_curly_braces_click={() => {}}
-    prune_context_instructions=""
+    prune_context_instructions_prefix=""
+    on_prune_context_instructions_prefix_change={(val) =>
+      console.log('Prune prefix changed:', val)
+    }
   />
 )
 
@@ -135,8 +151,12 @@ export const WithPlaceholderSelection = () => (
     on_invocation_count_change={(count) =>
       console.log('Invocation count changed:', count)
     }
+    on_go_to_file={(path) => console.log('Go to file:', path)}
     on_curly_braces_click={() => {}}
-    prune_context_instructions=""
+    prune_context_instructions_prefix=""
+    on_prune_context_instructions_prefix_change={(val) =>
+      console.log('Prune prefix changed:', val)
+    }
   />
 )
 
@@ -162,8 +182,12 @@ export const WithCommit = () => (
     on_invocation_count_change={(count) =>
       console.log('Invocation count changed:', count)
     }
+    on_go_to_file={(path) => console.log('Go to file:', path)}
     on_curly_braces_click={() => {}}
-    prune_context_instructions=""
+    prune_context_instructions_prefix=""
+    on_prune_context_instructions_prefix_change={(val) =>
+      console.log('Prune prefix changed:', val)
+    }
   />
 )
 
@@ -189,8 +213,12 @@ export const WithCommitWithQuotes = () => (
     on_invocation_count_change={(count) =>
       console.log('Invocation count changed:', count)
     }
+    on_go_to_file={(path) => console.log('Go to file:', path)}
     on_curly_braces_click={() => {}}
-    prune_context_instructions=""
+    prune_context_instructions_prefix=""
+    on_prune_context_instructions_prefix_change={(val) =>
+      console.log('Prune prefix changed:', val)
+    }
   />
 )
 export const WithContextAtCommit = () => (
@@ -215,8 +243,12 @@ export const WithContextAtCommit = () => (
     on_invocation_count_change={(count) =>
       console.log('Invocation count changed:', count)
     }
+    on_go_to_file={(path) => console.log('Go to file:', path)}
     on_curly_braces_click={() => {}}
-    prune_context_instructions=""
+    prune_context_instructions_prefix=""
+    on_prune_context_instructions_prefix_change={(val) =>
+      console.log('Prune prefix changed:', val)
+    }
   />
 )
 
@@ -246,7 +278,11 @@ export const WithEditFormatSelector = () => {
       context_file_paths={[]}
       invocation_count={1}
       on_invocation_count_change={set_edit_format as any} // Mocking for demo
-      prune_context_instructions=""
+      on_go_to_file={(path) => console.log('Go to file:', path)}
+      prune_context_instructions_prefix=""
+      on_prune_context_instructions_prefix_change={(val) =>
+        console.log('Prune prefix changed:', val)
+      }
     />
   )
 }
@@ -275,6 +311,9 @@ export const WithFilePaths = () => (
     on_invocation_count_change={(count) =>
       console.log('Invocation count changed:', count)
     }
-    prune_context_instructions=""
+    prune_context_instructions_prefix=""
+    on_prune_context_instructions_prefix_change={(val) =>
+      console.log('Prune prefix changed:', val)
+    }
   />
 )

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

@@ -1,4 +1,5 @@
 import { useRef, useEffect, useMemo, useState, useCallback } from 'react'
+import TextareaAutosize from 'react-textarea-autosize'
 import styles from './PromptField.module.scss'
 import cn from 'classnames'
 import { Icon } from '../../common/Icon'
@@ -9,6 +10,7 @@ import { use_ghost_text } from './hooks/use-ghost-text'
 import { use_drag_drop } from './hooks/use-drag-drop'
 import { use_keyboard_shortcuts } from './hooks/use-keyboard-shortcuts'
 import { use_edit_format_compacting } from './hooks/use-edit-format-compacting'
+import { use_prune_context_instructions } from './hooks/use-prune-context-instructions'
 import { DropdownMenu } from '../../common/DropdownMenu'
 import { use_is_mac } from '@shared/hooks'
 import {
@@ -54,8 +56,9 @@ export type PromptFieldProps = {
   currently_open_file_text?: string
   invocation_count: number
   on_invocation_count_change: (count: number) => void
-  on_go_to_file?: (file_path: string) => void
-  prune_context_instructions: string
+  on_go_to_file: (file_path: string) => void
+  prune_context_instructions_prefix: string
+  on_prune_context_instructions_prefix_change: (value: string) => void
 }
 
 export const PromptField: React.FC<PromptFieldProps> = (props) => {
@@ -70,6 +73,14 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
   const [hovered_edit_format, set_hovered_edit_format] =
     useState<EditFormat | null>(null)
 
+  const { prune_instructions, set_prune_instructions } =
+    use_prune_context_instructions({
+      prune_context_instructions_prefix:
+        props.prune_context_instructions_prefix,
+      on_prune_context_instructions_prefix_change:
+        props.on_prune_context_instructions_prefix_change
+    })
+
   const toggle_invocation_dropdown = useCallback(() => {
     set_is_invocation_dropdown_open((prev) => !prev)
   }, [])
@@ -312,60 +323,72 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
         onKeyDown={handle_container_key_down}
         onClick={() => input_ref.current?.focus()}
       >
-        {props.value && (
-          <button
-            className={cn(styles['clear-button'], 'codicon', 'codicon-close')}
-            onClick={() => {
-              set_should_show_ghost_text(false)
-              handle_clear()
-              input_ref.current?.focus()
+        {props.prompt_type == 'prune-context' && (
+          <TextareaAutosize
+            className={styles['prune-context-prefix']}
+            value={prune_instructions}
+            onChange={(e) => {
+              set_prune_instructions(e.target.value)
             }}
-            title="Clear"
+            onClick={(e) => e.stopPropagation()}
           />
         )}
-        <div
-          ref={input_ref}
-          contentEditable={true}
-          suppressContentEditableWarning={true}
-          onInput={(e) => {
-            set_should_show_ghost_text(true)
-            handle_input_change(e)
-          }}
-          onKeyDown={(e) => {
-            if (e.key == 'ArrowRight') {
-              set_should_show_ghost_text(false)
-              const ghost_text_node = input_ref.current?.querySelector(
-                'span[data-type="ghost-text"]'
-              )
-              if (ghost_text_node && !e.ctrlKey && !e.altKey && !e.metaKey) {
-                ghost_text_node.remove()
-                e.preventDefault()
-                const selection = window.getSelection()
-                if (selection) {
-                  const type = e.shiftKey ? 'extend' : 'move'
-                  selection.modify(type, 'forward', 'character')
+        <div className={styles['input-wrapper']}>
+          {props.value && (
+            <button
+              className={cn(styles['clear-button'], 'codicon', 'codicon-close')}
+              onClick={() => {
+                set_should_show_ghost_text(false)
+                handle_clear()
+                input_ref.current?.focus()
+              }}
+              title="Clear"
+            />
+          )}
+          <div
+            ref={input_ref}
+            contentEditable={true}
+            suppressContentEditableWarning={true}
+            onInput={(e) => {
+              set_should_show_ghost_text(true)
+              handle_input_change(e)
+            }}
+            onKeyDown={(e) => {
+              if (e.key == 'ArrowRight') {
+                set_should_show_ghost_text(false)
+                const ghost_text_node = input_ref.current?.querySelector(
+                  'span[data-type="ghost-text"]'
+                )
+                if (ghost_text_node && !e.ctrlKey && !e.altKey && !e.metaKey) {
+                  ghost_text_node.remove()
+                  e.preventDefault()
+                  const selection = window.getSelection()
+                  if (selection) {
+                    const type = e.shiftKey ? 'extend' : 'move'
+                    selection.modify(type, 'forward', 'character')
+                  }
                 }
+              } else {
+                set_should_show_ghost_text(true)
               }
-            } else {
-              set_should_show_ghost_text(true)
-            }
-            handle_key_down(e)
-          }}
-          onCopy={handle_copy}
-          onPaste={handle_paste}
-          onClick={handle_input_click}
-          onMouseDown={handle_mouse_down}
-          onDragStart={handle_drag_start}
-          onDrop={handle_drop}
-          onDragOver={handle_drag_over}
-          onDragEnd={handle_drag_end}
-          onFocus={() => set_is_focused(true)}
-          onBlur={() => set_is_focused(false)}
-          className={cn(styles.input, {
-            [styles['input--empty']]: !props.value
-          })}
-          data-placeholder={placeholder}
-        />
+              handle_key_down(e)
+            }}
+            onCopy={handle_copy}
+            onPaste={handle_paste}
+            onClick={handle_input_click}
+            onMouseDown={handle_mouse_down}
+            onDragStart={handle_drag_start}
+            onDrop={handle_drop}
+            onDragOver={handle_drag_over}
+            onDragEnd={handle_drag_end}
+            onFocus={() => set_is_focused(true)}
+            onBlur={() => set_is_focused(false)}
+            className={cn(styles.input, {
+              [styles['input--empty']]: !props.value
+            })}
+            data-placeholder={placeholder}
+          />
+        </div>
 
         <div
           className={styles.footer}

packages/ui/src/components/editor/panel/PromptField/hooks/use-handlers.ts

@@ -445,7 +445,7 @@ export const use_handlers = (
       )
       if (file_keyword_element) {
         const file_path = file_keyword_element.getAttribute('title')
-        if (file_path && props.on_go_to_file) {
+        if (file_path) {
           props.on_go_to_file(file_path)
         }
       }

packages/ui/src/components/editor/panel/PromptField/hooks/use-prune-context-instructions.ts

@@ -0,0 +1,52 @@
+import { useState, useRef, useEffect } from 'react'
+import type { PromptFieldProps } from '../PromptField'
+
+type UsePruneContextInstructionsParams = Pick<
+  PromptFieldProps,
+  | 'prune_context_instructions_prefix'
+  | 'on_prune_context_instructions_prefix_change'
+>
+
+export const use_prune_context_instructions = ({
+  prune_context_instructions_prefix,
+  on_prune_context_instructions_prefix_change
+}: UsePruneContextInstructionsParams) => {
+  const [prune_instructions, set_prune_instructions] = useState(
+    prune_context_instructions_prefix
+  )
+
+  const last_synced_prune_instructions_ref = useRef(
+    prune_context_instructions_prefix
+  )
+
+  useEffect(() => {
+    if (
+      prune_context_instructions_prefix !==
+      last_synced_prune_instructions_ref.current
+    ) {
+      set_prune_instructions(prune_context_instructions_prefix)
+      last_synced_prune_instructions_ref.current =
+        prune_context_instructions_prefix
+    }
+  }, [prune_context_instructions_prefix])
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (prune_instructions != prune_context_instructions_prefix) {
+        last_synced_prune_instructions_ref.current = prune_instructions
+        on_prune_context_instructions_prefix_change(prune_instructions)
+      }
+    }, 500)
+
+    return () => clearTimeout(timer)
+  }, [
+    prune_instructions,
+    prune_context_instructions_prefix,
+    on_prune_context_instructions_prefix_change
+  ])
+
+  return {
+    prune_instructions,
+    set_prune_instructions
+  }
+}

packages/vscode/package.json

@@ -685,7 +685,7 @@
           "scope": "resource",
           "default": "You're a helpful coding assistant. Don't explain changes in inline comments."
         },
-        "codeWebChat.pruneContextInstructions": {
+        "codeWebChat.pruneContextInstructionsPrefix": {
           "type": "string",
           "scope": "resource"
         },