Add the ability to initialize chats without immediately sending the prompt

Author: robertpiosik

README.md

@@ -15,9 +15,9 @@ Available in <a href="https://marketplace.visualstudio.com/items?itemName=robert
 
 **The workflow**
 
-Select folders and files you want to attach in message as context, type instructions, and pick your favorite chatbot—to continue in the browser, or call a model provider of choice—to stay in the editor.
+Select folders and files for context, type instructions, and pick your favorite chatbot—to continue in the browser, or call a model provider of choice—to stay in the editor.
 
-Once the response is ready, all changes can be applied to the codebase before being reviewed in a transparent and safe way.
+Once the response is ready, all changes can be applied to the codebase after you review them in a transparent and safe way.
 
 **Guiding principles**
 
@@ -60,7 +60,7 @@ Install the Connector browser extension and never copy&paste again.
 
 ## <span style="background-color: #fbb100; color: black; padding: 0.2em 0.6em; border-radius: 999px">API Tools</span>
 
-CWC is not limited to chatbot initializations. To use built-in API tools, bring your own keys (BYOK) for any OpenAI-API compatible model provider for usage-based billing.
+CWC is not limited to chatbot initializations. To use built-in API tools, bring your own keys (BYOK) for any OpenAI-API compatible model provider.
 
 **🛠️ Edit Context** \
 Modify files based on natural language instructions.

packages/browser/src/background/message-handler.ts

@@ -96,7 +96,8 @@ const process_next_chat = async () => {
     [`chat-init:${batch_id}`]: {
       text: current_queue_item.message.text,
       current_chat: current_chat,
-      client_id: current_queue_item.message.client_id
+      client_id: current_queue_item.message.client_id,
+      without_submission: current_queue_item.message.without_submission
     }
   })
 
@@ -177,7 +178,8 @@ const handle_initialize_chat_message = async (
     action: 'initialize-chats',
     text: message.text,
     chats: [chat_config],
-    client_id: message.client_id
+    client_id: message.client_id,
+    without_submission: message.without_submission
   }
 
   handle_initialize_chats_message(chats_message)

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/ai-studio.ts

@@ -365,7 +365,10 @@ export const ai_studio: Chatbot = {
     top_p_element.value = top_p.toString()
     top_p_element.dispatchEvent(new Event('change', { bubbles: true }))
   },
-  enter_message_and_send: async (message: string) => {
+  enter_message_and_send: async (
+    message: string,
+    without_submission?: boolean
+  ) => {
     const input_element = document.querySelector(
       'textarea'
     ) as HTMLTextAreaElement
@@ -395,7 +398,11 @@ export const ai_studio: Chatbot = {
       }
       check()
     })
+
     await close_panel()
+
+    if (without_submission) return
+
     const send_button = document.querySelector(
       'ms-run-button > button'
     ) as HTMLElement

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/claude.ts

@@ -111,7 +111,10 @@ export const claude: Chatbot = {
       }
     }
   },
-  enter_message_and_send: async (message: string) => {
+  enter_message_and_send: async (
+    message: string,
+    without_submission?: boolean
+  ) => {
     const input_element = document.querySelector(
       'div[contenteditable=true]'
     ) as HTMLElement
@@ -129,6 +132,9 @@ export const claude: Chatbot = {
     input_element.dispatchEvent(new Event('input', { bubbles: true }))
     input_element.dispatchEvent(new Event('change', { bubbles: true }))
     await new Promise((r) => setTimeout(r, 500))
+
+    if (without_submission) return
+
     const submit_button = Array.from(
       document.querySelectorAll('fieldset button')
     ).find((button) =>

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/kimi.ts

@@ -21,7 +21,10 @@ export const kimi: Chatbot = {
       check_for_element()
     })
   },
-  enter_message_and_send: async (message: string) => {
+  enter_message_and_send: async (
+    message: string,
+    without_submission?: boolean
+  ) => {
     const input_element = document.querySelector(
       'div[contenteditable=true]'
     ) as HTMLElement
@@ -43,6 +46,8 @@ export const kimi: Chatbot = {
       })
     )
 
+    if (without_submission) return
+
     await new Promise<void>((resolve) => {
       const check_button_state = () => {
         const send_button_container = document.querySelector(

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/meta.ts

@@ -28,7 +28,10 @@ export const meta: Chatbot = {
       check_for_element()
     })
   },
-  enter_message_and_send: async (message: string) => {
+  enter_message_and_send: async (
+    message: string,
+    without_submission?: boolean
+  ) => {
     const input_element = document.querySelector(
       'div[contenteditable=true]'
     ) as HTMLElement
@@ -51,6 +54,8 @@ export const meta: Chatbot = {
       })
     )
 
+    if (without_submission) return
+
     try {
       await new Promise<void>((resolve, reject) => {
         const timeout = 5000 // 5 seconds

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/openrouter.ts

@@ -93,7 +93,9 @@ export const openrouter: Chatbot = {
       return
     }
     const custom_system_instructions_button =
-      textarea.parentElement?.querySelector('div > button:last-child')
+      textarea.parentElement?.parentElement?.querySelector(
+        'div > button:last-child'
+      )
     if (!custom_system_instructions_button) {
       report_initialization_error({
         function_name: 'enter_system_instructions',

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/perplexity.ts

@@ -25,7 +25,10 @@ export const perplexity: Chatbot = {
       check_for_element()
     })
   },
-  enter_message_and_send: async (message: string) => {
+  enter_message_and_send: async (
+    message: string,
+    without_submission?: boolean
+  ) => {
     let instructions = message
     if (message.includes('<files>')) {
       instructions = message.split('<files>')[0].trim()
@@ -85,6 +88,8 @@ export const perplexity: Chatbot = {
 
     await new Promise((r) => requestAnimationFrame(r))
 
+    if (without_submission) return
+
     const submit_button = document.querySelector(
       'button[data-testid="submit-button"]'
     ) as HTMLButtonElement

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/qwen.ts

@@ -144,7 +144,10 @@ export const qwen: Chatbot = {
       }
     }
   },
-  enter_message_and_send: async (message: string) => {
+  enter_message_and_send: async (
+    message: string,
+    without_submission?: boolean
+  ) => {
     let instructions = message
     if (message.includes('<files>')) {
       instructions = message.split('<files>')[0].trim()
@@ -198,6 +201,8 @@ export const qwen: Chatbot = {
     input_element.dispatchEvent(new Event('change', { bubbles: true }))
     await new Promise((r) => requestAnimationFrame(r))
 
+    if (without_submission) return
+
     // Submit
     const submit_button = document.querySelector(
       'button#send-message-button'

packages/browser/src/content-scripts/send-prompt-content-script/send-prompt-content-script.ts

@@ -153,12 +153,16 @@ export const get_textarea_element = () => {
 const enter_message_and_send = async (params: {
   input_element: HTMLElement | null
   message: string
+  without_submission?: boolean
 }) => {
   if (params.input_element && params.input_element.isContentEditable) {
     params.input_element.innerText = params.message
     params.input_element.dispatchEvent(new Event('input', { bubbles: true }))
     params.input_element.dispatchEvent(new Event('change', { bubbles: true }))
     await new Promise((r) => requestAnimationFrame(r))
+
+    if (params.without_submission) return
+
     const form = params.input_element.closest('form')
     if (form) {
       form.requestSubmit()
@@ -180,6 +184,9 @@ const enter_message_and_send = async (params: {
     params.input_element.dispatchEvent(new Event('input', { bubbles: true }))
     params.input_element.dispatchEvent(new Event('change', { bubbles: true }))
     await new Promise((r) => requestAnimationFrame(r))
+
+    if (params.without_submission) return
+
     const form = params.input_element.closest('form')
     if (form) {
       form.requestSubmit()
@@ -196,7 +203,11 @@ const enter_message_and_send = async (params: {
   }
 }
 
-const initialize_chat = async (params: { message: string; chat: Chat }) => {
+const initialize_chat = async (params: {
+  message: string
+  chat: Chat
+  without_submission?: boolean
+}) => {
   if (chatbot?.set_model) {
     await chatbot.set_model(params.chat.model)
   }
@@ -219,11 +230,15 @@ const initialize_chat = async (params: { message: string; chat: Chat }) => {
     await chatbot.set_options(params.chat.options || [])
   }
   if (chatbot?.enter_message_and_send) {
-    await chatbot.enter_message_and_send(params.message)
+    await chatbot.enter_message_and_send(
+      params.message,
+      params.without_submission
+    )
   } else {
     await enter_message_and_send({
       input_element: get_textarea_element(),
-      message: params.message
+      message: params.message,
+      without_submission: params.without_submission
     })
   }
 
@@ -250,6 +265,7 @@ const main = async () => {
     text: string
     current_chat: Chat
     client_id: number
+    without_submission?: boolean
   }
 
   if (!stored_data) {
@@ -272,7 +288,8 @@ const main = async () => {
 
   await initialize_chat({
     message: message_text,
-    chat: current_chat
+    chat: current_chat,
+    without_submission: stored_data.without_submission
   })
 
   // Clean up the storage entry after using it