Add copy button to the UI

Build5Nines · Nov 8, 2024 · d102673 · d102673
1 parent 7760e70
commit d102673
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/app/nodejs/simple/static/index.html b/app/nodejs/simple/static/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
     <title>AIChatUI</title>  
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
     <style>  
         body { margin: 0; padding: 0; }  
         #chat-container { max-width: 600px; margin: 30px auto; }  
@@ -119,7 +120,17 @@ <h5><a href="https://build5nines.com" target="_blank"><img src="/images/build5ni
                 const formattedMessage = formatMessageForDisplay(message);
 
                 messageElement.addClass(`message-${sender.toLowerCase()}`);
-                messageElement.append(`<div class="message-role">${sender}</div>`);
+
+                const messageRole = $(`<div class="message-role">${sender}</div>`).appendTo(messageElement);
+
+                const copyButton = $('<button type="button" class="btn btn-sm btn-outline-secondary" style="float: right;"><i class="bi bi-clipboard"></i></button>').appendTo(messageRole);
+                copyButton.click(() => {
+                    navigator.clipboard.writeText(message).then(() => {
+                        console.log('Text copied to clipboard');
+                    }).catch((err) => {
+                        console.error('Failed to copy text to clipboard', err);
+                    });
+                });
 
                 var messageContentElement = $(`<div class="message-content">${formattedMessage}</div>`);
                 messageElement.append(messageContentElement);