Refactor symbol insertion logic to separate file path references (@) from context symbols (#) in the chat input

Author: robertpiosik

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

@@ -175,8 +175,6 @@
 
   &__left {
     display: flex;
-    gap: var(--padding-2px);
-    overflow: hidden;
 
     &__button {
       --size: 20px;
@@ -250,7 +248,7 @@
       }
 
       &--secondary {
-        @media (max-width: 330px) {
+        @media (max-width: 360px) {
           > span {
             display: none;
           }

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

@@ -18,10 +18,10 @@ export const Empty = () => (
     on_caret_position_change={(pos) => console.log('Caret position:', pos)}
     is_web_mode={false}
     on_at_sign_click={() => console.log('@ clicked')}
+    on_hash_sign_click={() => console.log('# clicked')}
     on_search_click={() => console.log('Search clicked')}
     on_submit_with_control={() => {}}
     on_curly_braces_click={() => {}}
-    has_context={true}
   />
 )
 
@@ -40,10 +40,10 @@ export const WithText = () => (
     on_caret_position_change={(pos) => console.log('Caret position:', pos)}
     is_web_mode={false}
     on_at_sign_click={() => console.log('@ clicked')}
+    on_hash_sign_click={() => console.log('# clicked')}
     on_search_click={() => console.log('Search clicked')}
     on_submit_with_control={() => {}}
     on_curly_braces_click={() => {}}
-    has_context={true}
   />
 )
 
@@ -62,10 +62,10 @@ export const LongText = () => (
     on_caret_position_change={(pos) => console.log('Caret position:', pos)}
     is_web_mode={false}
     on_at_sign_click={() => console.log('@ clicked')}
+    on_hash_sign_click={() => console.log('# clicked')}
     on_search_click={() => console.log('Search clicked')}
     on_submit_with_control={() => {}}
     on_curly_braces_click={() => {}}
-    has_context={true}
   />
 )
 
@@ -83,10 +83,10 @@ export const WithPlaceholderSavedContext = () => (
     on_caret_position_change={(pos) => console.log('Caret position:', pos)}
     on_search_click={() => console.log('Search clicked')}
     on_at_sign_click={() => console.log('@ clicked')}
+    on_hash_sign_click={() => console.log('# clicked')}
     is_web_mode={false}
     on_submit_with_control={() => {}}
     on_curly_braces_click={() => {}}
-    has_context={true}
   />
 )
 
@@ -104,9 +104,9 @@ export const WithPlaceholderSelection = () => (
     on_caret_position_change={(pos) => console.log('Caret position:', pos)}
     on_search_click={() => console.log('Search clicked')}
     on_at_sign_click={() => console.log('@ clicked')}
+    on_hash_sign_click={() => console.log('# clicked')}
     is_web_mode={false}
     on_submit_with_control={() => {}}
     on_curly_braces_click={() => {}}
-    has_context={true}
   />
 )

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

@@ -23,8 +23,8 @@ export type ChatInputProps = {
   is_web_mode: boolean
   on_search_click: () => void
   on_at_sign_click: () => void
+  on_hash_sign_click: () => void
   on_curly_braces_click: () => void
-  has_context: boolean
   caret_position_to_set?: number
   on_caret_position_set?: () => void
   focus_key?: number
@@ -130,14 +130,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         }}
         ref={container_ref}
       >
-        <div
-          className={styles['highlight-container']}
-          ref={highlight_ref}
-          onClick={() => {
-            if (props.value.includes('#Selection') && props.on_at_sign_click)
-              props.on_at_sign_click()
-          }}
-        >
+        <div className={styles['highlight-container']} ref={highlight_ref}>
           {get_highlighted_text({
             text: props.value,
             is_in_code_completions_mode: props.is_in_code_completions_mode,
@@ -204,14 +197,20 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
               e.stopPropagation()
             }}
           >
-            {/* TODO: Should be always visible but we need to handle including saved contexts first */}
+            <button
+              onClick={props.on_at_sign_click}
+              className={cn(styles['footer__left__button'])}
+              title="Reference file"
+            >
+              <span>@</span>
+            </button>
             {!props.is_in_code_completions_mode && (
               <button
-                onClick={props.on_at_sign_click}
+                onClick={props.on_hash_sign_click}
                 className={cn(styles['footer__left__button'])}
                 title="Insert symbol"
               >
-                <span>@</span>
+                <span>#</span>
               </button>
             )}
             <button

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

@@ -22,6 +22,10 @@ export const use_handlers = (props: ChatInputProps) => {
       setTimeout(() => {
         props.on_at_sign_click()
       }, 150)
+    } else if (new_value.charAt(caret_position - 1) == '#') {
+      setTimeout(() => {
+        props.on_hash_sign_click()
+      }, 150)
     }
 
     if (!new_value) {

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

@@ -1,18 +1,12 @@
 import { ViewProvider } from '@/views/panel/backend/panel-provider'
 import { at_sign_quick_pick } from '@/views/panel/backend/utils/at-sign-quick-pick'
 import { HOME_VIEW_TYPES } from '@/views/panel/types/home-view-type'
-import * as vscode from 'vscode'
 
 export const handle_at_sign_quick_pick = async (
-  provider: ViewProvider,
-  context: vscode.ExtensionContext,
-  is_for_code_completions: boolean
+  provider: ViewProvider
 ): Promise<void> => {
   const replacement = await at_sign_quick_pick({
-    context,
-    is_for_code_completions,
-    workspace_provider: provider.workspace_provider,
-    allow_reference_context_item: true
+    workspace_provider: provider.workspace_provider
   })
 
   if (!replacement) {

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

@@ -0,0 +1,47 @@
+import { ViewProvider } from '@/views/panel/backend/panel-provider'
+import { HOME_VIEW_TYPES } from '@/views/panel/types/home-view-type'
+import * as vscode from 'vscode'
+import { hash_sign_quick_pick } from '../utils/hash-sign-quick-pick'
+
+export const handle_hash_sign_quick_pick = async (
+  provider: ViewProvider,
+  context: vscode.ExtensionContext,
+  is_for_code_completions: boolean
+): Promise<void> => {
+  const replacement = await hash_sign_quick_pick({
+    context,
+    is_for_code_completions
+  })
+
+  if (!replacement) {
+    provider.send_message({
+      command: 'FOCUS_CHAT_INPUT'
+    })
+    return
+  }
+
+  let current_text = ''
+
+  const mode =
+    provider.home_view_type == HOME_VIEW_TYPES.WEB
+      ? provider.web_mode
+      : provider.api_mode
+  if (mode == 'ask') {
+    current_text = provider.ask_instructions
+  } else if (mode == 'edit-context') {
+    current_text = provider.edit_instructions
+  } else if (mode == 'no-context') {
+    current_text = provider.no_context_instructions
+  } else if (mode == 'code-completions') {
+    current_text = provider.code_completion_instructions
+  }
+
+  const is_after_hash_sign = current_text
+    .slice(0, provider.caret_position)
+    .endsWith('#')
+  if (is_after_hash_sign) {
+    provider.add_text_at_cursor_position(replacement, 1)
+  } else {
+    provider.add_text_at_cursor_position(replacement)
+  }
+}

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

@@ -24,13 +24,13 @@ export * from './handle-edit-context'
 export * from './handle-code-completion'
 export * from './handle-get-edit-format'
 export * from './handle-at-sign-quick-pick'
+export * from './handle-hash-sign-quick-pick'
 export * from './handle-get-edit-format-instructions'
 export * from './handle-get-mode-web'
 export * from './handle-get-mode-api'
 export * from './handle-save-mode-web'
 export * from './handle-save-mode-api'
 export * from './handle-get-version'
-export * from './handle-at-sign-quick-pick-for-preset-affix'
 export * from './handle-get-api-tool-configurations'
 export * from './handle-reorder-api-tool-configurations'
 export * from './handle-get-donations-visibility'

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

@@ -38,7 +38,6 @@ import {
   handle_get_home_view_type,
   handle_get_version,
   handle_show_prompt_template_quick_pick,
-  handle_at_sign_quick_pick_for_preset_affix,
   handle_get_api_tool_configurations,
   handle_reorder_api_tool_configurations,
   handle_pick_open_router_model,
@@ -51,7 +50,8 @@ import {
   handle_intelligent_update_file_in_review,
   handle_commit_changes,
   handle_accept_commit_message,
-  handle_cancel_commit_message
+  handle_cancel_commit_message,
+  handle_hash_sign_quick_pick
 } from './message-handlers'
 import {
   API_EDIT_FORMAT_STATE_KEY,
@@ -406,19 +406,13 @@ 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(
+            await handle_at_sign_quick_pick(this)
+          } else if (message.command == 'SHOW_HASH_SIGN_QUICK_PICK') {
+            await handle_hash_sign_quick_pick(
               this,
               this.context,
               message.is_for_code_completions
             )
-          } else if (
-            message.command == 'SHOW_AT_SIGN_QUICK_PICK_FOR_PRESET_AFFIX'
-          ) {
-            await handle_at_sign_quick_pick_for_preset_affix(
-              this,
-              this.context,
-              message
-            )
           } else if (message.command == 'GET_DONATIONS_VISIBILITY') {
             handle_get_donations_visibility(this)
           } else if (message.command == 'SAVE_DONATIONS_VISIBILITY') {