Add option of hiding think tag from response

Signed-off-by: Leslie Lazzarino <leslie.lazzarino@gmail.com>

Author: leslielazzarino

public/options.html

@@ -151,6 +151,19 @@ <h2>Context</h2>
           </div>
         </div>
 
+        <div class="settings-section">
+          <h2>Response</h2>
+          <div class="form-group">
+            <input type="checkbox" id="strip_think_tag" name="strip think tag" />
+            <label for="strip_think_tag" style="display: inline-block; margin-left: 5px">
+              Remove &lt;think&gt; tag and its content from the response
+              <sup title="When enabled, any &lt;think&gt;...&lt;/think&gt; block produced by reasoning models will be stripped from the response before it is inserted into the composer.">
+                &#8505;&#65039;
+              </sup>
+            </label>
+          </div>
+        </div>
+
         <div class="settings-section">
           <h2>Model settings</h2>
           <div class="form-group">

src/llmButtonClickHandling.ts

@@ -168,13 +168,19 @@ async function handleComposeSuccessResponse(tabId: number, response: LlmTextComp
 }
 
 async function getCleanedUpGeneratedEmail(response: LlmTextCompletionResponse, signature: string | undefined) {
-  const responseWithoutSignature = signature
-    ? response.choices[0].message.content.replace(signature, "")
-    : response.choices[0].message.content;
-
+  const options = await getPluginOptions();
+  let content = response.choices[0].message.content;
+  if (options.strip_think_tag) {
+    content = stripThinkTag(content);
+  }
+  const responseWithoutSignature = signature ? content.replace(signature, "") : content;
   return responseWithoutSignature.replace(/^\s*/, "");
 }
 
+export function stripThinkTag(text: string): string {
+  return text.replace(/<think>[\s\S]*?<\/think>/gi, "");
+}
+
 function handleLlmErrorResponse(response: TgiErrorResponse) {
   throw Error(`LLM responded with an error: ${response.error.message}`);
 }
@@ -188,11 +194,18 @@ export async function summarize(tabId: number, originalConversation?: string): P
   const requestStatus = allRequestsStatus.getRequestStatus(tabId);
   const response = await sendContentToLlm(messages, requestStatus.abortController.signal);
   if (isLlmTextCompletionResponse(response)) {
+    const options = await getPluginOptions();
+    let content = (response as LlmTextCompletionResponse).choices[0].message.content;
+    if (options.strip_think_tag) {
+      content = stripThinkTag(content);
+    }
     await browser.compose.setComposeDetails(tabId, {
-      plainTextBody: `${response.choices[0].message.content}\n\n\n\n${originalConversation}`,
+      plainTextBody: `${content}\n\n\n\n${originalConversation}`,
     });
   } else {
-    throw Error(`LLM while attempting to summarize responded with an error: ${response.error.message}`);
+    throw Error(
+      `LLM while attempting to summarize responded with an error: ${(response as TgiErrorResponse).error.message}`,
+    );
   }
 }
 

src/options.ts

@@ -8,6 +8,7 @@ document.querySelector("#api_token")?.addEventListener("change", updateApiToken)
 document.querySelector("#timeout")?.addEventListener("change", updateTimeout);
 document.querySelector("#llm_context")?.addEventListener("change", updateLlmContext);
 document.querySelector("#use_last_mails")?.addEventListener("change", updateUseLastMails);
+document.querySelector("#strip_think_tag")?.addEventListener("change", updateStripThinkTag);
 document.querySelector("#context_window")?.addEventListener("change", updateContextWindow);
 document.querySelector("#other_options")?.addEventListener("change", updateOtherOptions);
 
@@ -53,6 +54,13 @@ async function updateUseLastMails(event: Event) {
   await browser.storage.sync.set({ options });
 }
 
+async function updateStripThinkTag(event: Event) {
+  const stripThinkTagInput = event.target as HTMLInputElement;
+  const options = await getPluginOptions();
+  options.strip_think_tag = stripThinkTagInput.checked;
+  await browser.storage.sync.set({ options });
+}
+
 async function updateContextWindow(event: Event) {
   const contextWindowInput = event.target as HTMLInputElement;
   const options = await getPluginOptions();
@@ -77,6 +85,7 @@ export async function restoreOptions(): Promise<void> {
   getInputElement("#timeout").value = options.timeout ? `${options.timeout / 1000}` : "";
   getInputElement("#context_window").value = `${options.context_window}`;
   getInputElement("#use_last_mails").checked = options.include_recent_mails;
+  getInputElement("#strip_think_tag").checked = options.strip_think_tag;
   getInputElement("#other_options").value = JSON.stringify(options.params, null, 2);
   getInputElement("#llm_context").value = options.llmContext;
 }

src/optionsParams.ts

@@ -21,6 +21,7 @@ export interface Options {
   api_token?: string;
   context_window: number;
   include_recent_mails: boolean;
+  strip_think_tag: boolean;
   params: LlmParameters;
   llmContext: string;
   timeout?: number; // Timeout in milliseconds, undefined means no timeout
@@ -32,6 +33,7 @@ export const DEFAULT_OPTIONS: Options = {
   model: "",
   context_window: 4096,
   params: DEFAULT_PARAMS,
+  strip_think_tag: true,
   llmContext:
     "I need to write an email.\n" +
     "The email should be concise.\n" +