Enable quick file referencing using the @ sign by supporting search values and implementing Tab key completion in the chat input

Author: robertpiosik

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

@@ -22,7 +22,7 @@ export type ChatInputProps = {
   on_caret_position_change: (caret_position: number) => void
   is_web_mode: boolean
   on_search_click: () => void
-  on_at_sign_click: () => void
+  on_at_sign_click: (search_value?: string) => void
   on_hash_sign_click: () => void
   on_curly_braces_click: () => void
   caret_position_to_set?: number
@@ -99,6 +99,32 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     props.is_web_mode
   ])
 
+  const custom_handle_key_down = (
+    e: React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    if (e.key === 'Tab' && !e.shiftKey) {
+      const textarea = e.currentTarget
+      const value = textarea.value
+      const selection_start = textarea.selectionStart
+
+      if (selection_start > 0) {
+        const text_before_cursor = value.substring(0, selection_start)
+        if (
+          text_before_cursor.trim() !== '' &&
+          !/\s$/.test(text_before_cursor)
+        ) {
+          e.preventDefault()
+          const match = text_before_cursor.match(/(\S+)$/)
+          if (match) {
+            props.on_at_sign_click(match[1])
+            return
+          }
+        }
+      }
+    }
+    handle_key_down(e)
+  }
+
   return (
     <div className={styles.container}>
       {props.has_active_selection && props.is_in_code_completions_mode && (
@@ -146,7 +172,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           placeholder={placeholder}
           value={props.value}
           onChange={handle_input_change}
-          onKeyDown={handle_key_down}
+          onKeyDown={custom_handle_key_down}
           onSelect={handle_select}
           autoFocus
           className={styles.textarea}
@@ -170,7 +196,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
             }}
           >
             <button
-              onClick={props.on_at_sign_click}
+              onClick={() => props.on_at_sign_click()}
               className={cn(styles['footer__left__button'])}
               title="Reference file"
             >

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

@@ -7,7 +7,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-bottom: var(--padding-24px) var(--padding-24px) var(--padding-30px)
+  padding: var(--padding-24px) var(--padding-24px) var(--padding-30px)
     var(--padding-24px);
 
   &::before {

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

@@ -6,9 +6,8 @@
   &__item {
     display: flex;
     align-items: center;
-    gap: var(--padding-8px);
+    gap: var(--padding-6px);
     cursor: pointer;
-    font-size: var(--vscode-font-size);
 
     &__details {
       overflow: hidden;
@@ -18,6 +17,7 @@
 
     &__path {
       padding-left: var(--padding-6px);
+      font-size: var(--font-size-12px);
       color: var(--vscode-descriptionForeground);
     }
   }

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

@@ -21,6 +21,17 @@ export const StageFilesModal: React.FC<Props> = (props) => {
     }
   }
 
+  const handle_toggle_select_all = (is_checked: boolean) => {
+    if (is_checked) {
+      set_selected_files(props.files)
+    } else {
+      set_selected_files([])
+    }
+  }
+
+  const all_selected =
+    props.files.length > 0 && selected_files.length === props.files.length
+
   const handle_stage = () => {
     props.on_stage(selected_files)
   }
@@ -31,6 +42,15 @@ export const StageFilesModal: React.FC<Props> = (props) => {
       content_max_height="30vh"
       content_slot={
         <div className={styles.files}>
+          <label className={styles.files__item}>
+            <Checkbox
+              checked={all_selected}
+              on_change={handle_toggle_select_all}
+            />
+            <div className={styles.files__item__details}>
+              <strong>Select all</strong>
+            </div>
+          </label>
           {props.files.map((file) => {
             const last_slash_index = file.lastIndexOf('/')
             const filename =

packages/vscode/src/views/panel/backend/message-handlers/handle-at-sign-quick-pick.ts

@@ -8,6 +8,7 @@ import { natural_sort } from '@/utils/natural-sort'
 
 const at_sign_quick_pick = async (params: {
   workspace_provider: WorkspaceProvider
+  search_value?: string
 }): Promise<string | undefined> => {
   const checked_paths = params.workspace_provider.get_all_checked_paths()
   if (checked_paths.length == 0) {
@@ -46,6 +47,14 @@ const at_sign_quick_pick = async (params: {
         fullPath: normalized_path
       }
     })
+    .filter((item) => {
+      if (params.search_value) {
+        const search_lower = params.search_value.toLowerCase()
+        const full_path_lower = item.fullPath.toLowerCase()
+        return full_path_lower.includes(search_lower)
+      }
+      return true
+    })
 
   quick_pick_items.sort((a, b) => natural_sort(a.fullPath, b.fullPath))
 
@@ -64,10 +73,12 @@ const at_sign_quick_pick = async (params: {
 }
 
 export const handle_at_sign_quick_pick = async (
-  provider: ViewProvider
+  provider: ViewProvider,
+  search_value?: string
 ): Promise<void> => {
   const replacement = await at_sign_quick_pick({
-    workspace_provider: provider.workspace_provider
+    workspace_provider: provider.workspace_provider,
+    search_value: search_value
   })
 
   if (!replacement) {
@@ -77,6 +88,11 @@ export const handle_at_sign_quick_pick = async (
     return
   }
 
+  if (search_value) {
+    provider.add_text_at_cursor_position(replacement, search_value.length)
+    return
+  }
+
   let current_text = ''
 
   const mode =

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

@@ -430,7 +430,7 @@ export class ViewProvider implements vscode.WebviewViewProvider {
           } else if (message.command == 'GET_VERSION') {
             handle_get_version(this)
           } else if (message.command == 'SHOW_AT_SIGN_QUICK_PICK') {
-            await handle_at_sign_quick_pick(this)
+            await handle_at_sign_quick_pick(this, message.search_value)
           } else if (message.command == 'SHOW_HASH_SIGN_QUICK_PICK') {
             await handle_hash_sign_quick_pick(
               this,

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

@@ -500,10 +500,11 @@ export const Main: React.FC<Props> = (props) => {
     }
   }
 
-  const handle_at_sign_click = () => {
+  const handle_at_sign_click = (search_value?: string) => {
     post_message(props.vscode, {
       command: 'SHOW_AT_SIGN_QUICK_PICK',
-      is_for_code_completions: is_in_code_completions_mode
+      is_for_code_completions: is_in_code_completions_mode,
+      search_value
     })
   }
 

packages/vscode/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -39,7 +39,7 @@ type Props = {
   on_show_home: () => void
   on_search_click: () => void
   on_create_preset: () => void
-  on_at_sign_click: () => void
+  on_at_sign_click: (search_value?: string) => void
   on_hash_sign_click: () => void
   on_curly_braces_click: () => void
   on_quick_action_click: (command: string) => void

packages/vscode/src/views/panel/types/messages.ts

@@ -189,6 +189,7 @@ export interface CodeCompletionMessage extends BaseMessage {
 
 export interface ShowAtSignQuickPickMessage extends BaseMessage {
   command: 'SHOW_AT_SIGN_QUICK_PICK'
+  search_value?: string
   is_for_code_completions: boolean
 }