From ccedf063a031bbbe1d37832db8e9de683d6ce669 Mon Sep 17 00:00:00 2001
From: Russell <russell.ballestrini@gmail.com>
Date: Tue, 11 Nov 2025 13:38:03 -0500
Subject: [PATCH] Fix action buttons position - insert after <pre> not inside
 it (#36)

Problem:
- Buttons were being inserted as children of <pre> element
- This caused buttons to appear inside code blocks with wrong styling
- Template caching made changes appear to require "two commits"

Solution:
- Change insertion point from block.parentNode to preElement.parentNode
- This places buttons as siblings of <pre>, not children
- Add TEMPLATES_AUTO_RELOAD=True to prevent Flask template caching

Technical Details:
- block is the <code> element
- block.parentNode is the <pre> element
- preElement.parentNode.insertBefore puts buttons after <pre>
- Previous code put buttons inside <pre> after <code>

DOM Structure Before:
  <pre>
    <code>...</code>
    <buttons> <!-- Wrong: inside pre -->
  </pre>

DOM Structure After:
  <pre>
    <code>...</code>
  </pre>
  <buttons> <!-- Correct: after pre -->

Co-authored-by: Claude <noreply@anthropic.com>
---
 app.py              | 2 ++
 templates/chat.html | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app.py b/app.py
index a4944f4..73d5e1a 100644
--- a/app.py
+++ b/app.py
@@ -40,6 +40,8 @@ app.config["SQLALCHEMY_DATABASE_URI"] = (
     f"sqlite:///{os.path.join(app.instance_path, 'chat.db')}"
 )
 app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+# Enable template auto-reload to prevent stale templates during development
+app.config["TEMPLATES_AUTO_RELOAD"] = True
 
 db.init_app(app)
 
diff --git a/templates/chat.html b/templates/chat.html
index ac3f6d5..fd65cd7 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -1368,8 +1368,11 @@ function addCopyButtonToCodeBlock(block, wasTruncated = false) {
     buttonContainer.appendChild(copyButton);
     buttonContainer.appendChild(playButton);
 
-    // Insert the button container after the code block
-    block.parentNode.insertBefore(buttonContainer, block.nextSibling);
+    // Insert the button container after the <pre> element (not inside it)
+    // block is <code>, block.parentNode is <pre>
+    // We want to insert after <pre>, so we use <pre>.parentNode and <pre>.nextSibling
+    const preElement = block.parentNode;
+    preElement.parentNode.insertBefore(buttonContainer, preElement.nextSibling);
 }
 
 // Function to execute code block content