feat: add copy-to-clipboard button on AI chat code blocks

Author: abose

src/core-ai/AIChatPanel.js

@@ -1191,6 +1191,7 @@ define(function (require, exports, module) {
             try {
                 $target.html(marked.parse(_segmentText, { breaks: true, gfm: true }));
                 _enhanceColorCodes($target);
+                _addCopyButtons($target);
             } catch (e) {
                 $target.text(_segmentText);
             }
@@ -1257,6 +1258,35 @@ define(function (require, exports, module) {
         });
     }
 
+    /**
+     * Inject a copy-to-clipboard button into each <pre> block inside the given container.
+     * Idempotent: skips <pre> elements that already have a .ai-copy-btn.
+     */
+    function _addCopyButtons($container) {
+        $container.find("pre").each(function () {
+            const $pre = $(this);
+            if ($pre.find(".ai-copy-btn").length) {
+                return;
+            }
+            const $btn = $('<button class="ai-copy-btn" title="' + Strings.AI_CHAT_COPY_CODE + '">' +
+                '<i class="fa-solid fa-copy"></i></button>');
+            $btn.on("click", function (e) {
+                e.stopPropagation();
+                const $code = $pre.find("code");
+                const text = ($code.length ? $code[0] : $pre[0]).textContent;
+                Phoenix.app.copyToClipboard(text);
+                const $icon = $btn.find("i");
+                $icon.removeClass("fa-copy").addClass("fa-check");
+                $btn.attr("title", Strings.AI_CHAT_COPIED_CODE);
+                setTimeout(function () {
+                    $icon.removeClass("fa-check").addClass("fa-copy");
+                    $btn.attr("title", Strings.AI_CHAT_COPY_CODE);
+                }, 1500);
+            });
+            $pre.append($btn);
+        });
+    }
+
     function _appendToolIndicator(toolName, toolId) {
         // Remove thinking indicator on first content
         if (!_hasReceivedContent) {
@@ -1628,6 +1658,9 @@ define(function (require, exports, module) {
             // Finalize: remove ai-stream-target class so future messages get their own container
             $messages.find(".ai-stream-target").removeClass("ai-stream-target");
 
+            // Ensure copy buttons are present on all code blocks
+            _addCopyButtons($messages);
+
             // Mark all active tool indicators as done
             _finishActiveTools();
         }

src/nls/root/strings.js

@@ -1862,6 +1862,8 @@ define({
     "AI_CHAT_CONTEXT_SELECTION": "Selection L{0}-L{1}",
     "AI_CHAT_CONTEXT_CURSOR": "Line {0}",
     "AI_CHAT_CONTEXT_LIVE_PREVIEW": "Live Preview",
+    "AI_CHAT_COPY_CODE": "Copy",
+    "AI_CHAT_COPIED_CODE": "Copied!",
 
     // demo start - Phoenix Code Playground - Interactive Onboarding
     "DEMO_SECTION1_TITLE": "Edit in Live Preview",

src/styles/Extn-AIChatPanel.less

@@ -163,6 +163,7 @@
             border-radius: 4px;
             overflow-x: auto;
             margin: 6px 0;
+            position: relative;
 
             code {
                 background: none;
@@ -172,6 +173,31 @@
                 line-height: 1.5;
                 color: @project-panel-text-1;
             }
+
+            .ai-copy-btn {
+                position: absolute;
+                top: 4px;
+                right: 4px;
+                background: rgba(255, 255, 255, 0.08);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                border-radius: 4px;
+                color: rgba(255, 255, 255, 0.5);
+                cursor: pointer;
+                padding: 2px 6px;
+                font-size: 12px;
+                line-height: 1;
+                opacity: 0;
+                transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
+
+                &:hover {
+                    background: rgba(255, 255, 255, 0.15);
+                    color: rgba(255, 255, 255, 0.85);
+                }
+            }
+
+            &:hover .ai-copy-btn {
+                opacity: 1;
+            }
         }
 
         ul, ol {