Upload bundle.js

bundle.js

@@ -9128,7 +9128,8 @@ WebGPU throws: "${t8.message}"`);
         throw new Error("Llm not done loading");
       }
       const { pre, post } = this.promptTemplate[message.role];
-      const text = `${pre}${message.text}${post}`;
+      const strippedText = this.stripThoughts(message.text);
+      const text = `${pre}${strippedText}${post}`;
       const tokenCount = this.llmInference.sizeInTokens(text) ?? 0;
       return produce(message, (newMessage) => {
         newMessage.templateApplied = {
@@ -9137,6 +9138,9 @@ WebGPU throws: "${t8.message}"`);
         };
       });
     }
+    stripThoughts(text) {
+      return text.replace(/<\|channel>thought.*?<channel\|>/gs, "");
+    }
     applyTemplateToMessages(messages) {
       return messages.map((message) => this.applyTemplate(message));
     }
@@ -9296,6 +9300,7 @@ WebGPU throws: "${t8.message}"`);
     constructor() {
       super(...arguments);
       this.cachedModels = /* @__PURE__ */ new Map();
+      this.thinking = false;
       this.options = structuredClone(DEFAULT_OPTIONS);
     }
     async connectedCallback() {
@@ -9337,6 +9342,14 @@ WebGPU throws: "${t8.message}"`);
       });
       this.dispatchOptionsChanged();
     }
+    handleThinkingChange(e8) {
+      const event = new CustomEvent("thinking-changed", {
+        detail: e8.target.checked,
+        bubbles: true,
+        composed: true
+      });
+      this.dispatchEvent(event);
+    }
     async handleRemoveCached(e8, path) {
       e8.stopPropagation();
       if (confirm("Remove model from cache?")) {
@@ -9425,6 +9438,18 @@ WebGPU throws: "${t8.message}"`);
               </div>
             `}
         </div>
+        <div>
+          <label for="thinking">
+            <input
+              type="checkbox"
+              id="thinking"
+              .checked=${this.thinking}
+              @change=${this.handleThinkingChange}
+              style="width: auto; margin-right: 8px;"
+            />
+            Thinking
+          </label>
+        </div>
         <div>
           <label for="temperature"
             >Temperature: ${this.options.temperature.toFixed(2)}</label
@@ -9463,13 +9488,16 @@ WebGPU throws: "${t8.message}"`);
           />
         </div>
         <div>
-          <label for="force-f32">Force F32 Fallback:</label>
-          <input
-            type="checkbox"
-            id="force-f32"
-            .checked=${this.options.forceF32}
-            @change=${this.handleForceF32Change}
-          />
+          <label for="force-f32">
+            <input
+              type="checkbox"
+              id="force-f32"
+              .checked=${this.options.forceF32}
+              @change=${this.handleForceF32Change}
+              style="width: auto; margin-right: 8px;"
+            />
+            Force F32 Fallback
+          </label>
         </div>
       </div>
     `;
@@ -9577,6 +9605,9 @@ WebGPU throws: "${t8.message}"`);
   __decorateClass([
     n4({ type: Array })
   ], LlmOptions.prototype, "cachedModels", 2);
+  __decorateClass([
+    n4({ type: Boolean })
+  ], LlmOptions.prototype, "thinking", 2);
   __decorateClass([
     r5()
   ], LlmOptions.prototype, "options", 2);
@@ -9586,6 +9617,20 @@ WebGPU throws: "${t8.message}"`);
 
   // src/llm_chat.ts
   var import_deep_equal = __toESM(require_deep_equal());
+
+  // src/personas/base_gemma4_thinking.ts
+  var BASE_GEMMA4_THINKING_PERSONA = {
+    ...BASE_GEMMA4_PERSONA,
+    name: "Base Gemma4 Thinking",
+    instructions: [
+      {
+        role: "system",
+        text: "<|think|>"
+      }
+    ]
+  };
+
+  // src/llm_chat.ts
   function isChromium() {
     if (navigator.userAgent.includes("Chrome")) {
       return true;
@@ -9618,7 +9663,7 @@ WebGPU throws: "${t8.message}"`);
       this.currentAppliedOptions = structuredClone(DEFAULT_OPTIONS);
       this.pendingOptions = structuredClone(DEFAULT_OPTIONS);
       this.hasPendingOptionsChanges = false;
-      this.selectedPersona = BASE_GEMMA4_PERSONA;
+      this.isThinkingEnabled = false;
       this.cachedModels = /* @__PURE__ */ new Map();
       this.llmService = new LlmService();
       this.llmService.history.subscribe((history) => {
@@ -9634,6 +9679,14 @@ WebGPU throws: "${t8.message}"`);
         this.cachedModels = models;
       });
     }
+    get selectedPersona() {
+      return this.isThinkingEnabled ? BASE_GEMMA4_THINKING_PERSONA : BASE_GEMMA4_PERSONA;
+    }
+    handleThinkingToggle(event) {
+      this.isThinkingEnabled = event.detail;
+      this.llmService.setPersona(this.selectedPersona);
+      this.requestUpdate();
+    }
     getModelName() {
       const modelPath = this.currentAppliedOptions.baseOptions?.modelAssetPath;
       if (!modelPath) {
@@ -9796,7 +9849,9 @@ WebGPU throws: "${t8.message}"`);
         <llm-options
           .options=${this.pendingOptions}
           .cachedModels=${this.cachedModels}
+          .thinking=${this.isThinkingEnabled}
           @options-changed=${this.handleOptionsChange}
+          @thinking-changed=${this.handleThinkingToggle}
           @cached-models-changed=${this.handleCachedModelsChanged}
           ?disabled=${this.isLoadingModel || this.isGenerating}
         >
@@ -9998,6 +10053,9 @@ WebGPU throws: "${t8.message}"`);
   __decorateClass([
     r5()
   ], LlmChat.prototype, "hasPendingOptionsChanges", 2);
+  __decorateClass([
+    r5()
+  ], LlmChat.prototype, "isThinkingEnabled", 2);
   __decorateClass([
     r5()
   ], LlmChat.prototype, "cachedModels", 2);