From 13b3a450ef7f45ddf68bf9a343897e1cf8612d80 Mon Sep 17 00:00:00 2001
From: Kevin On <40454531+kevin-on@users.noreply.github.com>
Date: Sun, 25 Jan 2026 09:19:58 +0900
Subject: [PATCH] feat: add Copy/Apply buttons at bottom of code blocks

Closes #498

- Added footer section with Copy and Apply buttons below code block content
- Allows users to execute actions without scrolling back to the top
- Reuses existing header button styles for consistency
---
 .../chat-view/MarkdownCodeComponent.tsx       | 45 +++++++++++++++++++
 styles.css                                    | 11 +++++
 2 files changed, 56 insertions(+)

diff --git a/src/components/chat-view/MarkdownCodeComponent.tsx b/src/components/chat-view/MarkdownCodeComponent.tsx
index 60fbc521..90572062 100644
--- a/src/components/chat-view/MarkdownCodeComponent.tsx
+++ b/src/components/chat-view/MarkdownCodeComponent.tsx
@@ -124,6 +124,51 @@ export default function MarkdownCodeComponent({
           {String(children)}
         </MemoizedSyntaxHighlighterWrapper>
       )}
+      <div className="smtcmp-code-block-footer">
+        <div className="smtcmp-code-block-header-button-container">
+          <button
+            className="clickable-icon smtcmp-code-block-header-button"
+            onClick={() => {
+              handleCopy()
+            }}
+          >
+            {copied ? (
+              <>
+                <Check size={10} />
+                <span>Copied</span>
+              </>
+            ) : (
+              <>
+                <CopyIcon size={10} />
+                <span>Copy</span>
+              </>
+            )}
+          </button>
+          <button
+            className="clickable-icon smtcmp-code-block-header-button"
+            onClick={
+              isApplying
+                ? undefined
+                : () => {
+                    onApply(String(children))
+                  }
+            }
+            aria-disabled={isApplying}
+          >
+            {isApplying ? (
+              <>
+                <Loader2 className="spinner" size={14} />
+                <span>Applying...</span>
+              </>
+            ) : (
+              <>
+                <Play size={10} />
+                <span>Apply</span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/styles.css b/styles.css
index 220ed026..a1c22c08 100644
--- a/styles.css
+++ b/styles.css
@@ -582,6 +582,17 @@ input[type='text'].smtcmp-chat-list-dropdown-item-title-input {
   padding: var(--size-4-3);
 }
 
+.smtcmp-code-block-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: var(--font-smallest);
+  border-top: 1px solid var(--background-modifier-border);
+  background-color: var(--background-primary);
+  border-radius: 0 0 var(--radius-s) var(--radius-s);
+  height: calc(var(--size-4-8) - var(--size-4-1));
+}
+
 #smtcmp-apply-view {
   flex: 1 1 auto;
   display: flex;