Refactor symbol handling logic and introduce PromptTemplate component to support symbol insertion in preset prefix and suffix fields

- Create a special component for prefix/suffix textareas in the `apps/editor/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/EditPresetForm.tsx`. It should have "insert symbol" button just like `packages/ui/src/components/editor/panel/PromptField/PromptField.tsx`. When the button is clicked, log to the console 'insert button clicked'.
- TemplateTextarea should be a separate UI component
- in UiTemplateTextarea add prop for [Fragment]
- handle "insert symbol click" with the `apps/editor/src/views/panel/backend/message-handlers/handle-hash-sign-quick-pick/handle-hash-sign-quick-pick.ts`
- move `packages/ui/src/components/editor/common/TemplateTextarea/TemplateTextarea.tsx` to `packages/ui/src/components/editor/panel`
- from prompt field, extract handling of symbols to `packages/ui/src/components/editor/panel/prompt-symbols` and use it in 'template textarea'
- rename `packages/ui/src/components/editor/panel/prompt` to `packages/ui/src/components/editor/panel/prompts`
- [Pasted text]
- place PromptField and TemplateTextarea in `packages/ui/src/components/editor/panel/prompts`
- `TemplateTextarea` rename to `PromptTemplate`
- in the prompt template, trigger[Fragment] on '#' typed in the field

Author: robertpiosik

apps/editor/src/views/panel/backend/message-handlers/handle-hash-sign-quick-pick/handle-hash-sign-quick-pick.ts

@@ -158,7 +158,8 @@ const hash_sign_quick_pick = async (params: {
 export const handle_hash_sign_quick_pick = async (
   panel_provider: PanelProvider,
   context: vscode.ExtensionContext,
-  is_for_code_completions: boolean
+  is_for_code_completions: boolean,
+  target?: 'prompt-field' | 'preset-prefix' | 'preset-suffix'
 ): Promise<void> => {
   const is_prune_context =
     (panel_provider.mode == MODE.WEB &&
@@ -173,24 +174,34 @@ export const handle_hash_sign_quick_pick = async (
   })
 
   if (!replacement) {
-    panel_provider.send_message({
-      command: 'FOCUS_PROMPT_FIELD'
-    })
+    if (!target || target == 'prompt-field') {
+      panel_provider.send_message({
+        command: 'FOCUS_PROMPT_FIELD'
+      })
+    }
     return
   }
 
-  const current_text = panel_provider.current_instruction
-
-  const is_after_hash_sign = current_text
-    .slice(0, panel_provider.caret_position)
-    .endsWith('#')
-  if (is_after_hash_sign) {
-    panel_provider.add_text_at_cursor_position(replacement, 1)
+  if (target == 'preset-prefix' || target == 'preset-suffix') {
+    panel_provider.send_message({
+      command: 'INSERT_SYMBOL_AT_CURSOR',
+      text: replacement,
+      target
+    })
   } else {
-    panel_provider.add_text_at_cursor_position(replacement)
-  }
+    const current_text = panel_provider.current_instruction
+
+    const is_after_hash_sign = current_text
+      .slice(0, panel_provider.caret_position)
+      .endsWith('#')
+    if (is_after_hash_sign) {
+      panel_provider.add_text_at_cursor_position(replacement, 1)
+    } else {
+      panel_provider.add_text_at_cursor_position(replacement)
+    }
 
-  panel_provider.send_message({
-    command: 'FOCUS_PROMPT_FIELD'
-  })
+    panel_provider.send_message({
+      command: 'FOCUS_PROMPT_FIELD'
+    })
+  }
 }

apps/editor/src/views/panel/backend/panel-provider.ts

@@ -858,7 +858,8 @@ export class PanelProvider implements vscode.WebviewViewProvider {
             await handle_hash_sign_quick_pick(
               this,
               this.context,
-              message.is_for_code_completions
+              message.is_for_code_completions,
+              message.target
             )
           } else if (message.command == 'GO_TO_FILE') {
             handle_go_to_file(message)

apps/editor/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -1,7 +1,7 @@
 import styles from './MainView.module.scss'
 import { Configurations as UiConfigurations } from '@ui/components/editor/panel/Configurations'
 import { Presets as UiPresets } from '@ui/components/editor/panel/Presets'
-import { PromptField as UiPromptField } from '@ui/components/editor/panel/PromptField'
+import { PromptField as UiPromptField } from '@ui/components/editor/panel/prompts/PromptField'
 import { Separator as UiSeparator } from '@ui/components/editor/panel/Separator'
 import { Preset } from '@shared/types/preset'
 import { Responses as UiResponses } from '@ui/components/editor/panel/Responses'

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -529,6 +529,13 @@ export const Panel = () => {
               <EditPresetForm
                 preset={updating_preset}
                 on_update={set_updated_preset}
+                on_insert_symbol_click={(target) => {
+                  post_message(vscode, {
+                    command: 'SHOW_HASH_SIGN_QUICK_PICK',
+                    is_for_code_completions: false,
+                    target
+                  })
+                }}
                 pick_model={(chatbot_name, current_model_id) => {
                   post_message(vscode, {
                     command: 'PICK_MODEL',
@@ -546,7 +553,6 @@ export const Panel = () => {
                     current_effort
                   })
                 }}
-                on_at_sign_in_affix={() => {}}
               />
             </UiPage>
           </div>

apps/editor/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/EditPresetForm.tsx

@@ -8,6 +8,10 @@ import { Field as UiField } from '@ui/components/editor/panel/Field'
 import { Slider as UiSlider } from '@ui/components/editor/panel/Slider'
 import { Input as UiInput } from '@ui/components/editor/common/Input'
 import { Textarea as UiTextarea } from '@ui/components/editor/common/Textarea'
+import {
+  PromptTemplate as UiPromptTemplate,
+  PromptTemplateHandle
+} from '@ui/components/editor/panel/prompts/PromptTemplate'
 import { BackendMessage } from '@/views/panel/types/messages'
 import { PresetOption as UiPresetOption } from '@ui/components/editor/panel/PresetOption'
 import { Scrollable as UiScrollable } from '@ui/components/editor/panel/Scrollable'
@@ -22,7 +26,7 @@ type Props = {
     supported_efforts: string[],
     current_effort?: string
   ) => void
-  on_at_sign_in_affix: () => void
+  on_insert_symbol_click: (target: 'preset-prefix' | 'preset-suffix') => void
 }
 
 /**
@@ -31,8 +35,8 @@ type Props = {
  * - add additional prefix and suffix to each preset below it.
  */
 export const EditPresetForm: React.FC<Props> = (props) => {
-  const prefix_ref = useRef<HTMLTextAreaElement>(null)
-  const suffix_ref = useRef<HTMLTextAreaElement>(null)
+  const prefix_ref = useRef<PromptTemplateHandle>(null)
+  const suffix_ref = useRef<PromptTemplateHandle>(null)
 
   const [chatbot, set_chatbot] = useState(props.preset.chatbot)
   const [name, set_name] = useState(props.preset.name)
@@ -192,23 +196,43 @@ export const EditPresetForm: React.FC<Props> = (props) => {
         handle_chatbot_change(message.chatbot_id as keyof typeof CHATBOTS)
       } else if (message.command == 'NEWLY_PICKED_REASONING_EFFORT') {
         set_reasoning_effort(message.effort)
+      } else if (message.command == 'INSERT_SYMBOL_AT_CURSOR') {
+        const ref = message.target == 'preset-prefix' ? prefix_ref : suffix_ref
+        const set_text =
+          message.target == 'preset-prefix'
+            ? set_prompt_prefix
+            : set_prompt_suffix
+        const text =
+          message.target == 'preset-prefix' ? prompt_prefix : prompt_suffix
+
+        if (ref.current) {
+          const start = ref.current.get_caret_position()
+          const end = start
+          const before = (text || '').substring(0, start)
+          const after = (text || '').substring(end)
+
+          const is_after_hash_sign = before.endsWith('#')
+          const prefix_before = is_after_hash_sign
+            ? before.slice(0, -1)
+            : before
+
+          const new_text = prefix_before + message.text + after
+          set_text(new_text)
+
+          setTimeout(() => {
+            if (ref.current) {
+              ref.current.focus()
+              const new_caret = prefix_before.length + message.text.length
+              ref.current.set_caret_position(new_caret)
+            }
+          }, 0)
+        }
       }
     }
     window.addEventListener('message', handle_message)
     return () => window.removeEventListener('message', handle_message)
   }, [active_field, prompt_prefix, prompt_suffix])
 
-  const check_for_at_sign = (
-    value: string,
-    ref: React.RefObject<HTMLTextAreaElement>
-  ) => {
-    if (ref.current && value.charAt(ref.current.selectionStart - 1) == '@') {
-      setTimeout(() => {
-        props.on_at_sign_in_affix()
-      }, 150)
-    }
-  }
-
   const supported_reasoning_efforts = useMemo(() => {
     return (
       chatbot_config?.supported_reasoning_efforts ||
@@ -527,17 +551,15 @@ export const EditPresetForm: React.FC<Props> = (props) => {
                 : "Text prepended to all prompts used with this group's presets."
             }
           >
-            <UiTextarea
+            <UiPromptTemplate
               id="prefix"
               ref={prefix_ref}
               value={prompt_prefix}
-              on_change={(value) => {
-                set_prompt_prefix(value)
-                check_for_at_sign(value, prefix_ref)
-              }}
-              onFocus={() => set_active_field('prompt_prefix')}
-              min_rows={2}
-              blur_on_enter={false}
+              on_change={(value) => set_prompt_prefix(value)}
+              on_focus={() => set_active_field('prompt_prefix')}
+              on_insert_symbol_click={() =>
+                props.on_insert_symbol_click('preset-prefix')
+              }
             />
           </UiField>
 
@@ -550,17 +572,15 @@ export const EditPresetForm: React.FC<Props> = (props) => {
                 : "Text appended to all prompts used with this group's presets."
             }
           >
-            <UiTextarea
+            <UiPromptTemplate
               id="suffix"
               ref={suffix_ref}
               value={prompt_suffix}
-              on_change={(value) => {
-                set_prompt_suffix(value)
-                check_for_at_sign(value, suffix_ref)
-              }}
-              onFocus={() => set_active_field('prompt_suffix')}
-              min_rows={2}
-              blur_on_enter={false}
+              on_change={(value) => set_prompt_suffix(value)}
+              on_focus={() => set_active_field('prompt_suffix')}
+              on_insert_symbol_click={() =>
+                props.on_insert_symbol_click('preset-suffix')
+              }
             />
           </UiField>
         </UiFieldset>

apps/editor/src/views/panel/types/messages.ts

@@ -260,6 +260,7 @@ export interface ShowAtSignQuickPickMessage extends BaseMessage {
 export interface ShowHashSignQuickPickMessage extends BaseMessage {
   command: 'SHOW_HASH_SIGN_QUICK_PICK'
   is_for_code_completions: boolean
+  target?: 'prompt-field' | 'preset-prefix' | 'preset-suffix'
 }
 
 export interface CancelApiRequestMessage extends BaseMessage {
@@ -561,6 +562,12 @@ export interface SetupProgressMessage {
   setup_progress: SetupProgress
 }
 
+export interface InsertSymbolAtCursorMessage extends BaseMessage {
+  command: 'INSERT_SYMBOL_AT_CURSOR'
+  text: string
+  target: 'preset-prefix' | 'preset-suffix'
+}
+
 export type FrontendMessage =
   | GetInstructionsMessage
   | SaveInstructionsMessage
@@ -957,3 +964,4 @@ export type BackendMessage =
   | PruneContextInstructionsPrefixMessage
   | RecordingStateMessage
   | SetupProgressMessage
+  | InsertSymbolAtCursorMessage