Refactor ChatInput to use raw value and HTML reconstruction for input handling, enabling proper deletion and navigation of highlighted file keywords

Author: robertpiosik

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

@@ -73,6 +73,21 @@ const set_caret_position_for_div = (element: HTMLElement, position: number) => {
         char_count = next_char_count
       }
     } else {
+      if (
+        node.nodeType === Node.ELEMENT_NODE &&
+        (node as HTMLElement).getAttribute('contenteditable') === 'false'
+      ) {
+        const text_len = node.textContent?.length ?? 0
+        const next_char_count = char_count + text_len
+        if (position >= char_count && position <= next_char_count) {
+          range.setStartAfter(node)
+          range.collapse(true)
+          found = true
+        } else {
+          char_count = next_char_count
+        }
+        return // Do not iterate over children
+      }
       for (let i = 0; i < node.childNodes.length; i++) {
         find_text_node_and_offset(node.childNodes[i])
         if (found) break
@@ -256,13 +271,13 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
 
   const highlighted_html = useMemo(() => {
     return get_highlighted_text({
-      text: display_text,
+      text: props.value,
       is_in_code_completions_mode: props.is_in_code_completions_mode,
       has_active_selection: props.has_active_selection,
       context_file_paths: props.context_file_paths ?? []
     })
   }, [
-    display_text,
+    props.value,
     props.is_in_code_completions_mode,
     props.has_active_selection,
     props.context_file_paths
@@ -384,29 +399,83 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       }
     }
 
-    // Handle backspace on shortened filenames
-    if (e.key == 'Backspace' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
-      const display_value = e.currentTarget.textContent ?? ''
-      const cursor_pos = caret_position
+    if (e.key == 'Backspace') {
+      const selection = window.getSelection()
+      if (
+        input_ref.current &&
+        selection &&
+        selection.rangeCount > 0 &&
+        selection.isCollapsed
+      ) {
+        const range = selection.getRangeAt(0)
+        let node_before_cursor: Node | null = null
+
+        if (
+          range.startContainer.nodeType === Node.TEXT_NODE &&
+          range.startOffset === 0
+        ) {
+          node_before_cursor = range.startContainer.previousSibling
+        } else if (
+          range.startContainer.nodeType === Node.ELEMENT_NODE &&
+          range.startOffset > 0
+        ) {
+          node_before_cursor =
+            range.startContainer.childNodes[range.startOffset - 1]
+        }
 
-      // Check if we're at the end of a word that looks like a filename
-      if (cursor_pos > 0) {
-        const text_before = display_value.substring(0, cursor_pos)
-        const filename_match = text_before.match(
-          /([^\s,;:!?`]*\.[^\s,;:!?`]+)$/
-        )
+        if (
+          node_before_cursor &&
+          node_before_cursor.nodeType === Node.ELEMENT_NODE
+        ) {
+          const el = node_before_cursor as HTMLElement
+          if (el.classList.contains(styles['file-keyword'])) {
+            e.preventDefault()
 
-        if (filename_match) {
-          const filename = filename_match[1]
-          const matching_path = props.context_file_paths?.find(
-            (path) => path.endsWith('/' + filename) || path === filename
-          )
+            const display_pos = get_caret_position_from_div(input_ref.current)
+            const raw_pos = map_display_pos_to_raw_pos(
+              display_pos,
+              props.value,
+              props.context_file_paths ?? []
+            )
 
-          if (matching_path) {
-            e.preventDefault()
-            const new_value = props.value.replace(`\`${matching_path}\``, '')
-            props.on_change(new_value)
-            return
+            let start_of_path = -1
+            let end_of_path = -1
+
+            end_of_path = raw_pos - 1
+            if (end_of_path >= 0 && props.value[end_of_path] === '`') {
+              const text_before = props.value.substring(0, end_of_path)
+              start_of_path = text_before.lastIndexOf('`')
+            }
+
+            if (
+              start_of_path !== -1 &&
+              end_of_path !== -1 &&
+              start_of_path < end_of_path
+            ) {
+              const path_in_backticks = props.value.substring(
+                start_of_path + 1,
+                end_of_path
+              )
+              if (props.context_file_paths?.includes(path_in_backticks)) {
+                const new_value =
+                  props.value.substring(0, start_of_path) +
+                  props.value.substring(end_of_path + 1)
+                const new_raw_cursor_pos = start_of_path
+                props.on_change(new_value)
+
+                setTimeout(() => {
+                  if (input_ref.current) {
+                    const display_pos = map_raw_pos_to_display_pos(
+                      new_raw_cursor_pos,
+                      new_value,
+                      props.context_file_paths ?? []
+                    )
+                    set_caret_position_for_div(input_ref.current, display_pos)
+                  }
+                }, 0)
+                return
+              }
+            }
           }
         }
       }
@@ -490,12 +559,12 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       e.preventDefault()
       e.stopPropagation()
 
-      const filename = text_element.textContent
-      if (filename && props.on_go_to_file && props.context_file_paths) {
-        const file_path = props.context_file_paths.find(
-          (p) => p.endsWith('/' + filename) || p == filename
-        )
-        if (file_path) {
+      const file_keyword_element = text_element.closest<HTMLElement>(
+        `.${styles['file-keyword']}`
+      )
+      if (file_keyword_element) {
+        const file_path = file_keyword_element.getAttribute('title')
+        if (file_path && props.on_go_to_file) {
           props.on_go_to_file(file_path)
         }
       }

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

@@ -34,6 +34,21 @@ const set_caret_position_for_div = (element: HTMLElement, position: number) => {
         char_count = next_char_count
       }
     } else {
+      if (
+        node.nodeType === Node.ELEMENT_NODE &&
+        (node as HTMLElement).getAttribute('contenteditable') === 'false'
+      ) {
+        const text_len = node.textContent?.length ?? 0
+        const next_char_count = char_count + text_len
+        if (position >= char_count && position <= next_char_count) {
+          range.setStartAfter(node)
+          range.collapse(true)
+          found = true
+        } else {
+          char_count = next_char_count
+        }
+        return // Do not iterate over children
+      }
       for (let i = 0; i < node.childNodes.length; i++) {
         find_text_node_and_offset(node.childNodes[i])
         if (found) break
@@ -53,6 +68,39 @@ const set_caret_position_for_div = (element: HTMLElement, position: number) => {
   }
 }
 
+const reconstruct_raw_value_from_node = (node: Node): string => {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent || ''
+  }
+
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node as HTMLElement
+
+    if (el.dataset.type === 'file-keyword') {
+      const path = el.getAttribute('title')
+      if (path) {
+        return `\`${path}\``
+      }
+    }
+
+    if (el.dataset.type === 'selection-keyword') {
+      return el.textContent || ''
+    }
+
+    if (el.childNodes.length > 0) {
+      let content = ''
+      for (const child of Array.from(el.childNodes)) {
+        content += reconstruct_raw_value_from_node(child)
+      }
+      return content
+    }
+
+    return el.textContent || ''
+  }
+
+  return ''
+}
+
 export const use_handlers = (props: ChatInputProps) => {
   const [history_index, set_history_index] = useState(-1)
   const [is_history_enabled, set_is_history_enabled] = useState(!props.value)
@@ -68,39 +116,18 @@ export const use_handlers = (props: ChatInputProps) => {
   }
 
   const handle_input_change = (e: React.FormEvent<HTMLDivElement>) => {
-    let new_display_value = e.currentTarget.textContent ?? ''
-    if (new_display_value == '\n') {
-      new_display_value = ''
-    }
-
-    // Convert display text back to the original format with backticks
-    // This is a reverse transformation
-    let new_value = new_display_value
-    const context_file_paths = props.context_file_paths ?? []
-
-    // Find all potential filenames in the text and check if they should be wrapped in backticks
-    const words = new_display_value.split(/(\s+)/)
-    const converted_words = words.map((word) => {
-      // Check if this looks like a filename
-      if (/^[^\s,;:!?`]*\.[^\s,;:!?`]+$/.test(word)) {
-        // Check if any context path ends with this filename
-        const matching_path = context_file_paths.find(
-          (path) => path.endsWith('/' + word) || path === word
-        )
-        if (matching_path) {
-          return `\`${matching_path}\``
-        }
-      }
-      return word
-    })
-    new_value = converted_words.join('')
+    const new_value = reconstruct_raw_value_from_node(e.currentTarget)
 
+    if (new_value === props.value) {
+      return
+    }
     props.on_change(new_value)
     set_history_index(-1)
 
     // Clear saved value on any input change
     set_saved_value_before_at_sign(null)
 
+    const new_display_value = e.currentTarget.textContent ?? ''
     const caret_position = get_caret_position_from_div(e.currentTarget)
     if (new_display_value.charAt(caret_position - 1) == '@') {
       set_saved_value_before_at_sign(props.value)

packages/ui/src/components/editor/panel/ChatInput/utils/get-highlighted-text.tsx

@@ -9,6 +9,39 @@ const escape_html = (str: string): string =>
     .replace(/"/g, '"')
     .replace(/'/g, ''')
 
+const process_text_part_for_files = (
+  text: string,
+  context_file_paths: string[]
+): string => {
+  const file_path_regex = /`([^\s`]*\.[^\s`]+)`/g
+  const parts = text.split(file_path_regex)
+
+  return parts
+    .map((part, index) => {
+      // part at odd index is a file_path
+      if (index % 2 == 1) {
+        const file_path = part
+        if (context_file_paths.includes(file_path)) {
+          const filename = file_path.split('/').pop() || file_path
+          return `<span class="${
+            styles['file-keyword']
+          }" contentEditable="false" data-type="file-keyword" title="${escape_html(
+            file_path
+          )}"><span class="${
+            styles['file-keyword__icon']
+          }"></span><span class="${styles['file-keyword__text']}">${escape_html(
+            filename
+          )}</span></span>`
+        }
+        // If not a context file, return with backticks
+        return `\`${escape_html(file_path)}\``
+      }
+      // part at even index is regular text
+      return escape_html(part)
+    })
+    .join('')
+}
+
 export const get_highlighted_text = (params: {
   text: string
   is_in_code_completions_mode: boolean
@@ -19,16 +52,18 @@ export const get_highlighted_text = (params: {
     const regex = /(#SavedContext:(?:WorkspaceState|JSON)\s+"[^"]+")/g
     const parts = params.text.split(regex)
     return parts
-      .map((part, index) => {
+      .map((part) => {
         if (
           part &&
           /^#SavedContext:(?:WorkspaceState|JSON)\s+"[^"]+"$/.test(part)
         ) {
-          return `<span class="${styles['selection-keyword']}">${escape_html(
+          return `<span class="${
+            styles['selection-keyword']
+          }" contentEditable="false" data-type="selection-keyword">${escape_html(
             part
           )}</span>`
         }
-        return escape_html(part)
+        return process_text_part_for_files(part, params.context_file_paths)
       })
       .join('')
   }
@@ -43,46 +78,29 @@ export const get_highlighted_text = (params: {
         const className = cn(styles['selection-keyword'], {
           [styles['selection-keyword--error']]: !params.has_active_selection
         })
-        return `<span class="${className}">${escape_html(part)}</span>`
+        return `<span class="${className}" contentEditable="false" data-type="selection-keyword">${escape_html(
+          part
+        )}</span>`
       }
       if (part && /^#Changes:[^\s,;:!?]+$/.test(part)) {
-        return `<span class="${styles['selection-keyword']}">${escape_html(
+        return `<span class="${
+          styles['selection-keyword']
+        }" contentEditable="false" data-type="selection-keyword">${escape_html(
           part
         )}</span>`
       }
       if (
         part &&
         /^#SavedContext:(?:WorkspaceState|JSON)\s+"[^"]+"$/.test(part)
       ) {
-        return `<span class="${styles['selection-keyword']}">${escape_html(
+        return `<span class="${
+          styles['selection-keyword']
+        }" contentEditable="false" data-type="selection-keyword">${escape_html(
           part
         )}</span>`
       }
 
-      const filename_regex = /([^\s,;:!?`]*\.[^\s,;:!?`]+)/g
-      return part
-        .split(filename_regex)
-        .map((sub_part, index) => {
-          if (index % 2 == 1) {
-            const is_context_file = params.context_file_paths.some(
-              (path) => path.endsWith('/' + sub_part) || path == sub_part
-            )
-            if (is_context_file) {
-              const full_path = params.context_file_paths.find(
-                (path) => path.endsWith('/' + sub_part) || path == sub_part
-              )
-              return `<span class="${styles['file-keyword']}"${
-                full_path ? ` title="${escape_html(full_path)}"` : ''
-              }><span class="${
-                styles['file-keyword__icon']
-              }"></span><span class="${
-                styles['file-keyword__text']
-              }">${escape_html(sub_part)}</span></span>`
-            }
-          }
-          return escape_html(sub_part)
-        })
-        .join('')
+      return process_text_part_for_files(part, params.context_file_paths)
     })
     .join('')
 }