Refactor filename handling in ChatInput to support filenames starting with non-word characters and enable removal of referenced files on click or backspace

Author: robertpiosik

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

@@ -113,13 +113,12 @@
     align-items: center;
     justify-content: center;
     color: var(--cwc-text-color);
-    opacity: 0.5;
     font-size: var(--font-size-10px);
-    padding: 0 3px;
-    margin-left: 2px;
+    padding: 0 var(--padding-3px);
+    margin-left: var(--padding-2px);
     font-weight: 500;
     border: 1px solid var(--cwc-border-color);
-    border-radius: 5px;
+    border-radius: var(--border-radius-5px);
     pointer-events: none;
   }
 }
@@ -134,6 +133,23 @@
   }
 }
 
+.file-keyword {
+  font-size: var(--font-size-12px);
+  background-color: var(--vscode-editor-selectionBackground);
+  border-radius: var(--border-radius-4px);
+  padding: 0 var(--padding-4px) 0 var(--padding-3px);
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  &::before {
+    font-family: 'codicon';
+    content: '\ea7b';
+    margin-right: var(--padding-3px);
+    font-size: var(--font-size-12px);
+  }
+}
+
 .footer {
   display: flex;
   bottom: 0;

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

@@ -218,6 +218,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       !value ||
       caret_position != value.length ||
       value.endsWith(' ') ||
+      value.endsWith('\n') ||
       !props.context_file_paths
     ) {
       return false
@@ -226,7 +227,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     // Check if cursor is at the end of a shortened filename
     const text_before_cursor = value.substring(0, caret_position)
     const filename_match = text_before_cursor.match(
-      /([^\s,;:.!?`]+\.[^\s,;:.!?`]+)$/
+      /([^\s,;:.!?`]*\.[^\s,;:.!?`]+)$/
     )
 
     if (filename_match) {
@@ -385,7 +386,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       if (cursor_pos > 0) {
         const text_before = display_value.substring(0, cursor_pos)
         const filename_match = text_before.match(
-          /([^\s,;:.!?`]+\.[^\s,;:.!?`]+)$/
+          /([^\s,;:.!?`]*\.[^\s,;:.!?`]+)$/
         )
 
         if (filename_match) {
@@ -407,6 +408,75 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     handle_key_down(e)
   }
 
+  const handle_input_click = (e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement
+    if (target.classList.contains(styles['file-keyword'])) {
+      e.preventDefault()
+      e.stopPropagation()
+
+      const input_element = input_ref.current
+      if (!input_element) return
+
+      const display_pos = get_caret_position_from_div(input_element)
+      const raw_pos = map_display_pos_to_raw_pos(
+        display_pos,
+        props.value,
+        props.context_file_paths ?? []
+      )
+
+      let start_of_path = -1
+      let end_of_path = -1
+
+      if (props.value[raw_pos] === '`') {
+        // case: raw_pos at start
+        start_of_path = raw_pos
+        end_of_path = props.value.indexOf('`', start_of_path + 1)
+      } else if (raw_pos > 0 && props.value[raw_pos - 1] === '`') {
+        // case: raw_pos at end
+        end_of_path = raw_pos - 1
+        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)) {
+          let leading_part = props.value.substring(0, start_of_path)
+          let trailing_part = props.value.substring(end_of_path + 1)
+
+          // Handle spacing.
+          if (leading_part.endsWith(' ')) {
+            leading_part = leading_part.slice(0, -1)
+          } else if (trailing_part.startsWith(' ')) {
+            trailing_part = trailing_part.substring(1)
+          }
+
+          const new_value = leading_part + trailing_part
+          const new_raw_cursor_pos = leading_part.length
+          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 (
     <div className={styles.container}>
       {props.has_active_selection && props.is_in_code_completions_mode && (
@@ -459,6 +529,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           suppressContentEditableWarning={true}
           onInput={handle_input_change}
           onKeyDown={custom_handle_key_down}
+          onClick={handle_input_click}
           autoFocus
           className={cn(styles.input, {
             [styles['input-with-tab-hint']]: show_tab_hint

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

@@ -79,7 +79,7 @@ export const use_handlers = (props: ChatInputProps) => {
     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)) {
+      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

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

@@ -59,7 +59,7 @@ export const get_highlighted_text = (params: {
         )}</span>`
       }
 
-      const filename_regex = /([^\s,;:.!?`]+\.[^\s,;:.!?`]+)/g
+      const filename_regex = /([^\s,;:.!?`]*\.[^\s,;:.!?`]+)/g
       return part
         .split(filename_regex)
         .map((sub_part, index) => {
@@ -68,9 +68,9 @@ export const get_highlighted_text = (params: {
               (path) => path.endsWith('/' + sub_part) || path == sub_part
             )
             if (is_context_file) {
-              return `<span class="${
-                styles['selection-keyword']
-              }">${escape_html(sub_part)}</span>`
+              return `<span class="${styles['file-keyword']}">${escape_html(
+                sub_part
+              )}</span>`
             }
           }
           return escape_html(sub_part)