[Major Release]: bumped version to v3.1.0

.github/workflows/chrome-extension-ci.yml

@@ -75,7 +75,7 @@ jobs:
             # Don't increment major versions (x.0.0)
             echo "version=$current_version" >> $GITHUB_OUTPUT
             echo "version_changed=false" >> $GITHUB_OUTPUT
-          elif git ls-remote --tags origin refs/tags/v$current_version >/dev/null; then
+          elif git ls-remote --tags origin | grep -q "refs/tags/v$current_version"; then
             # If tag exists and it's not a major version, increment patch
             IFS='.' read -r major minor patch <<< "$current_version"
             new_version="$major.$minor.$((patch + 1))"

extensions/changelog.md

@@ -1,5 +1,27 @@
 ## Changelog of the extensions
 
+### feat/fix/ref: - 11/27/2024 - @lumpinif
+
+#### Performance & Code Quality
+
+- Extremely streamline code structure and implementation approach
+- Much optimized performance
+- Streamline and organize code for thinking-block implementation
+
+#### Bug Fixes
+
+- Fix flash of unstyled content (FOUC)
+- Fix stutter when submitting new replies
+- Fix FOUC and streaming issues for thinking-block implementation
+
+#### UI Improvements
+
+- Update chevron icon with transition effect
+
+#### Architecture
+
+- Implement ultimate approach with simplest and most effective implementation after experimentation
+
 ### fix: - 11/17/2024 - @lumpinif
 
 #### Observer Management and Memory Leak Prevention

extensions/chrome/README.md

@@ -223,6 +223,23 @@ We use several tools to maintain code quality:
 - **ESLint**: Finds and fixes JavaScript problems
 - **Prettier**: Formats your code consistently
 
+### Version Control & Releases
+
+The project uses automated version bumping through CI:
+
+- **Automatic Version Bumping**: When code is merged to main, the CI will:
+
+  - Auto-increment the patch version (e.g., 1.0.0 -> 1.0.1)
+  - Create a new release with the bumped version
+  - Skip version bump for major versions (x.0.0)
+
+- **Manual Version Control**:
+  - Developers can manually set both versions in `package.json` and `manifest.json`
+  - Major version changes (x.0.0) must be set manually
+  - Manual versions will be respected by CI
+
+> **Note**: If you need to manually set a version, update both `package.json` and `manifest.json` before merging to main.
+
 ### Continuous Integration
 
 Our GitHub Actions setup automatically:

extensions/chrome/components.json

@@ -4,7 +4,7 @@
   "rsc": false,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "tailwind.config.cjs",
     "css": "src/styles/globals.css",
     "baseColor": "zinc",
     "cssVariables": true,

extensions/chrome/eslint.config.cjs

@@ -33,6 +33,9 @@ module.exports = [
         setInterval: "readonly",
         Node: "readonly",
         HTMLButtonElement: "readonly",
+        MutationRecord: "readonly",
+        MouseEvent: "readonly",
+        SVGSVGElement: "readonly",
       },
     },
     plugins: {
@@ -58,6 +61,8 @@ module.exports = [
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "warn",
       "no-inline-styles": "off",
+      "no-undef": "off",
+      "react/prop-types": "off",
     },
     settings: {
       react: {

extensions/chrome/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thinking-claude",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Chrome extension for letting Claude think like a real human",
   "type": "module",
   "scripts": {
@@ -19,6 +19,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.460.0",
     "react": "^18.2.0",
@@ -46,6 +52,7 @@
     "identity-obj-proxy": "^3.0.0",
     "lint-staged": "^14.0.1",
     "markdownlint-cli2": "^0.15.0",
+    "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
     "postcss-nesting": "^12.0.1",

extensions/chrome/postcss.config.mjs → extensions/chrome/postcss.config.cjs

@@ -1,6 +1,6 @@
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

extensions/chrome/public/manifest.json

@@ -1,12 +1,13 @@
 {
   "manifest_version": 3,
   "name": "Thinking Claude",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Chrome extension for letting Claude think like a real human",
   "content_scripts": [
     {
       "matches": ["https://*.claude.ai/*"],
-      "js": ["content.js"]
+      "js": ["content.js"],
+      "css": ["styles.css"]
     }
   ],
   "icons": {

extensions/chrome/public/styles.css

@@ -0,0 +1,188 @@
+/* Overwrite original claude thinking block content styles */
+.code-block__code {
+  background: none !important;
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  color: var(--text-text-200) !important;
+  padding: 1em !important;
+  max-width: 100%;
+  display: block;
+  height: auto !important;
+  min-height: 0vh !important;
+  max-height: 50vh !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  transition: all 0.3s ease-out !important;
+}
+
+/* collapsed states */
+
+/* Collapsed state */
+.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 {
+  height: 0 !important;
+  padding: 0 !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+}
+
+/* Expanded state */
+/* [data-thinking-block-state="expanded"] .code-block__code {
+  height: 50vh !important;
+  padding: 1em !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+} */
+
+code {
+  background: none !important;
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  text-wrap: balance !important;
+  color: hsl(var(--text-300)) !important;
+  font-size: 0.875rem !important;
+  display: block !important;
+  max-width: 100% !important;
+  text-shadow: none !important;
+}
+
+/* Add selection styles */
+code span::selection {
+  background: hsl(var(--clay) / var(--tw-text-opacity)) !important;
+  color: hsl(var(--text-100)) !important;
+}
+
+code span::-moz-selection {
+  background: hsl(var(--clay) / var(--tw-text-opacity)) !important;
+  color: hsl(var(--text-100)) !important;
+}
+
+code span:hover {
+  transition: color 0.4s ease;
+  color: hsl(var(--text-100));
+}
+
+/* --------------------------------- */
+
+/* Copy button container */
+div[data-is-streaming] .pointer-events-none.sticky {
+  cursor: pointer !important;
+  pointer-events: auto !important;
+}
+
+/* Copy button container */
+div[data-is-streaming] .from-bg-300\\/90 {
+  pointer-events: auto !important;
+  user-select: none !important;
+}
+
+/* --------------------------------- */
+
+/* Update the header text */
+/* This is the original header text */
+pre .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;
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-user-message);
+}
+
+/* Update the text of the header */
+[data-thinking-block-state="collapsed"]
+  pre
+  .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::after {
+  content: "Open Claude's thinking";
+  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 {
+  content: "Claude's thinking";
+  font-size: 0.875rem; /* Restore font size */
+  cursor: pointer;
+  font-family: var(--font-user-message);
+  transition: color 0.15s ease-in-out;
+}
+
+/* Hover state */
+[data-thinking-block-state="expanded"]
+  pre
+  .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
+  .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::after {
+  content: "Claude is thinking...";
+  background: linear-gradient(
+    90deg,
+    rgba(156, 163, 175, 0.7) 0%,
+    rgba(209, 213, 219, 1) 25%,
+    rgba(156, 163, 175, 0.7) 50%,
+    rgba(209, 213, 219, 1) 75%,
+    rgba(156, 163, 175, 0.7) 100%
+  );
+  background-size: 200% 100%;
+  animation: gradientWave 3s linear infinite;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+  cursor: pointer;
+  font-family: var(--font-user-message);
+}
+
+/* Chevron-down icon */
+pre .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::before {
+  content: "";
+  width: 15px;
+  height: 15px;
+  margin-right: 0.25rem;
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="black" fill-rule="evenodd" clip-rule="evenodd"></path></svg>');
+  mask-image: url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="black" fill-rule="evenodd" clip-rule="evenodd"></path></svg>');
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  background-color: hsl(var(--text-500));
+  transform: translateY(-1px);
+  transition: transform 0.25s ease-out;
+}
+
+/* --------------------------------- */
+
+/* Shimmer animation for streaming state */
+@keyframes gradientWave {
+  0% {
+    background-position: 200% 50%;
+  }
+  100% {
+    background-position: -200% 50%;
+  }
+}
+
+/* --------------------------------- */
+
+/* Chevron animation */
+
+[data-thinking-block-state="collapsed"]
+  pre
+  .text-text-300.absolute.pl-3.pt-2\.5.text-xs:not(:empty)::before {
+  transform: rotate(180deg);
+}

extensions/chrome/src/components/sample-ui.tsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+export const SampleApp: React.FC = () => {
+  return (
+    <div>
+      <div>Hello World</div>
+    </div>
+  )
+}

extensions/chrome/src/components/ui/accordion.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }