fix header issue for response with thinking block

fix: update the selectors to only target what we want

Author: richards199999

extensions/chrome/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thinking-claude",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Chrome extension for letting Claude think like a real human",
   "type": "module",
   "scripts": {

extensions/chrome/public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Thinking Claude",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Chrome extension for letting Claude think like a real human",
   "content_scripts": [
     {

extensions/chrome/public/styles.css

@@ -1,5 +1,5 @@
 /* Overwrite original claude thinking block content styles */
-.code-block__code {
+div[data-is-streaming] pre:first-child .code-block__code {
   background: none !important;
   white-space: pre-wrap !important;
   word-wrap: break-word !important;
@@ -20,30 +20,33 @@
 /* collapsed states */
 
 /* Collapsed state */
-.code-block__code.collapsed {
+div[data-is-streaming] pre:first-child .code-block__code.collapsed {
   height: 0 !important;
   padding: 0 !important;
   visibility: hidden !important;
   opacity: 0 !important;
 }
 
 /* Collapsed state */
-[data-thinking-block-state="collapsed"] .code-block__code {
+[data-thinking-block-state="collapsed"]
+  div[data-is-streaming]
+  pre:first-child
+  .code-block__code {
   height: 0 !important;
   padding: 0 !important;
   visibility: hidden !important;
   opacity: 0 !important;
 }
 
 /* Expanded state */
-/* [data-thinking-block-state="expanded"] .code-block__code {
+/* [data-thinking-block-state="expanded"] div[data-is-streaming] pre:first-child .code-block__code {
   height: 50vh !important;
   padding: 1em !important;
   visibility: visible !important;
   opacity: 1 !important;
 } */
 
-code {
+div[data-is-streaming] pre:first-child code {
   background: none !important;
   white-space: pre-wrap !important;
   word-wrap: break-word !important;
@@ -74,13 +77,13 @@ code span:hover {
 /* --------------------------------- */
 
 /* Copy button container */
-div[data-is-streaming] .pointer-events-none.sticky {
+div[data-is-streaming] pre:first-child .pointer-events-none.sticky {
   cursor: pointer !important;
   pointer-events: auto !important;
 }
 
 /* Copy button container */
-div[data-is-streaming] .from-bg-300\\/90 {
+div[data-is-streaming] pre:first-child .from-bg-300\\/90 {
   pointer-events: auto !important;
   user-select: none !important;
 }
@@ -89,7 +92,9 @@ div[data-is-streaming] .from-bg-300\\/90 {
 
 /* Update the header text */
 /* This is the original header text */
-pre .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty) {
+div[data-is-streaming]
+  pre:first-child
+  .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty) {
   font-size: 0; /* Hide original text */
   pointer-events: auto !important; /* Make sure it's clickable */
   cursor: pointer !important;
@@ -99,17 +104,20 @@ pre .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty) {
 }
 
 /* Update the text of the header */
-[data-thinking-block-state="collapsed"]
-  pre
+
+div[data-thinking-block-state="collapsed"]
+  pre:first-child
   .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::after {
-  content: "Open Claude's thinking";
+  content: "View Claude's thinking" !important;
   font-size: 0.875rem; /* Restore font size */
   cursor: pointer;
   font-family: var(--font-user-message);
   transition: color 0.15s ease-in-out;
 }
 
-pre .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::after {
+div[data-is-streaming]
+  pre:first-child
+  .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::after {
   content: "Claude's thinking";
   font-size: 0.875rem; /* Restore font size */
   cursor: pointer;
@@ -118,16 +126,17 @@ pre .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::after {
 }
 
 /* Hover state */
+/* This implementation is limited. We can consider to disable this hover state. */
 [data-thinking-block-state="expanded"]
-  pre
+  pre:first-child
   .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty):hover::after {
   color: hsl(var(--text-100));
   content: "Hide Claude's thinking";
 }
 
 /* Streaming state styles */
 div[data-is-streaming="true"]
-  pre
+  pre:first-child
   .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::after {
   content: "Claude is thinking...";
   background: linear-gradient(
@@ -149,7 +158,8 @@ div[data-is-streaming="true"]
 }
 
 /* Chevron-down icon */
-pre .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::before {
+pre:first-child
+  .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::before {
   content: "";
   width: 15px;
   height: 15px;
@@ -182,7 +192,7 @@ pre .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::before {
 /* Chevron animation */
 
 [data-thinking-block-state="collapsed"]
-  pre
+  pre:first-child
   .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::before {
   transform: rotate(180deg);
 }

extensions/chrome/src/content/v3/features/thinking-block/thinking-block-toggle.ts

@@ -5,7 +5,7 @@ import { setupControls } from "./setup-controls"
 
 export function addThinkingBlockToggle() {
   mutationObserver.initialize()
-  mutationObserver.subscribe(processThinkingBlocks)
+  return mutationObserver.subscribe(processThinkingBlocks)
 }
 
 function processThinkingBlocks() {

extensions/chrome/src/selectors/index.ts

@@ -1,4 +1,4 @@
 export const THINKING_BLOCK_CONTROLS_SELECTORS = [
-  ".text-text-300.absolute",
-  ".pointer-events-none.sticky",
+  "pre:first-child .text-text-300.absolute",
+  "pre:first-child .pointer-events-none.sticky",
 ].join(", ")

extensions/chrome/test.txt

@@ -1,2 +1,2 @@
 Version Bumping Test File
-v3.1.0
+v3.1.1