3 files changed, 98 insertions, 14 deletions

diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index f3a4708d..441e2042 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -87,12 +87,9 @@ body {
 }
 
 body {
-    padding: 10px;
     background: var(--colour-1);
     color: var(--colour-3);
     height: 100vh;
-    max-width: 1600px;
-    margin: auto;
 }
 
 .row {
@@ -1146,4 +1143,4 @@ a:-webkit-any-link {
     .message.regenerate {
         opacity: 1;
     }
-}
\ No newline at end of file
+}
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index 9790b261..42ddb129 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -57,6 +57,25 @@ function filter_message(text) {
     )
 }
 
+function fallback_clipboard (text) {
+    var textBox = document.createElement("textarea");
+    textBox.value = text;
+    textBox.style.top = "0";
+    textBox.style.left = "0";
+    textBox.style.position = "fixed";
+    document.body.appendChild(textBox);
+    textBox.focus();
+    textBox.select();
+    try {
+        var success = document.execCommand('copy');
+        var msg = success ? 'succeeded' : 'failed';
+        console.log('Clipboard Fallback: Copying text command ' + msg);
+    } catch (e) {
+        console.error('Clipboard Fallback: Unable to copy', e);
+    }
+    document.body.removeChild(textBox);
+}
+
 hljs.addPlugin(new CopyButtonPlugin());
 let typesetPromise = Promise.resolve();
 const highlight = (container) => {
@@ -88,18 +107,31 @@ const register_message_buttons = async () => {
             })
         }
     });
+
     document.querySelectorAll(".message .fa-clipboard").forEach(async (el) => {
         if (!("click" in el.dataset)) {
             el.dataset.click = "true";
             el.addEventListener("click", async () => {
                 const message_el = el.parentElement.parentElement.parentElement;
                 const copyText = await get_message(window.conversation_id, message_el.dataset.index);
-                navigator.clipboard.writeText(copyText);
+               
+            try {        
+                if (!navigator.clipboard) {
+                    throw new Error("navigator.clipboard: Clipboard API unavailable.");
+                }
+                await navigator.clipboard.writeText(copyText);
+            } catch (e) {
+                console.error(e);
+                console.error("Clipboard API writeText() failed! Fallback to document.exec(\"copy\")...");
+                fallback_clipboard(copyText);
+            }
+            
                 el.classList.add("clicked");
                 setTimeout(() => el.classList.remove("clicked"), 1000);
             })
         }
     });
+
     document.querySelectorAll(".message .fa-volume-high").forEach(async (el) => {
         if (!("click" in el.dataset)) {
             el.dataset.click = "true";
@@ -306,6 +338,14 @@ const prepare_messages = (messages, message_index = -1) => {
         messages = messages.filter((_, index) => message_index >= index);
     }
 
+    let new_messages = [];
+    if (systemPrompt?.value) {
+        new_messages.push({
+            "role": "system",
+            "content": systemPrompt.value
+        });
+    }
+
     // Remove history, if it's selected
     if (document.getElementById('history')?.checked) {
         if (message_index == null) {
@@ -315,13 +355,6 @@ const prepare_messages = (messages, message_index = -1) => {
         }
     }
 
-    let new_messages = [];
-    if (systemPrompt?.value) {
-        new_messages.push({
-            "role": "system",
-            "content": systemPrompt.value
-        });
-    }
     messages.forEach((new_message) => {
         // Include only not regenerated messages
         if (new_message && !new_message.regenerate) {
@@ -334,6 +367,7 @@ const prepare_messages = (messages, message_index = -1) => {
     return new_messages;
 }
 
+
 async function add_message_chunk(message) {
     if (message.type == "conversation") {
         console.info("Conversation used:", message.conversation)
@@ -1424,4 +1458,4 @@ if (SpeechRecognition) {
             recognition.start();
         }
     });
-}
\ No newline at end of file
+}
diff --git a/g4f/gui/client/static/js/highlightjs-copy.min.js b/g4f/gui/client/static/js/highlightjs-copy.min.js
index ac11d33e..cd8ae957 100644
--- a/g4f/gui/client/static/js/highlightjs-copy.min.js
+++ b/g4f/gui/client/static/js/highlightjs-copy.min.js
@@ -1 +1,54 @@
-class CopyButtonPlugin{constructor(options={}){self.hook=options.hook;self.callback=options.callback}"after:highlightElement"({el,text}){let button=Object.assign(document.createElement("button"),{innerHTML:"Copy",className:"hljs-copy-button"});button.dataset.copied=false;el.parentElement.classList.add("hljs-copy-wrapper");el.parentElement.appendChild(button);el.parentElement.style.setProperty("--hljs-theme-background",window.getComputedStyle(el).backgroundColor);button.onclick=function(){if(!navigator.clipboard)return;let newText=text;if(hook&&typeof hook==="function"){newText=hook(text,el)||text}navigator.clipboard.writeText(newText).then(function(){button.innerHTML="Copied!";button.dataset.copied=true;let alert=Object.assign(document.createElement("div"),{role:"status",className:"hljs-copy-alert",innerHTML:"Copied to clipboard"});el.parentElement.appendChild(alert);setTimeout(()=>{button.innerHTML="Copy";button.dataset.copied=false;el.parentElement.removeChild(alert);alert=null},2e3)}).then(function(){if(typeof callback==="function")return callback(newText,el)})}}}
\ No newline at end of file
+class CopyButtonPlugin {
+    constructor(options = {}) {
+        self.hook = options.hook;
+        self.callback = options.callback
+    }
+    "after:highlightElement"({
+        el,
+        text
+    }) {
+        let button = Object.assign(document.createElement("button"), {
+            innerHTML: "Copy",
+            className: "hljs-copy-button"
+        });
+        button.dataset.copied = false;
+        el.parentElement.classList.add("hljs-copy-wrapper");
+        el.parentElement.appendChild(button);
+        el.parentElement.style.setProperty("--hljs-theme-background", window.getComputedStyle(el).backgroundColor);
+        button.onclick = async () => {
+            let newText = text;
+            if (hook && typeof hook === "function") {
+                newText = hook(text, el) || text
+            }
+            try {            
+                if (!navigator.clipboard) {
+                    throw new Error("navigator.clipboard: Clipboard API unavailable.");
+                }
+                await navigator.clipboard.writeText(newText);
+            } catch (e) {
+                console.error(e);
+                console.error("Clipboard API writeText() failed! Fallback to document.exec(\"copy\")...");
+                fallback_clipboard(newText);
+            }
+                button.innerHTML = "Copied!";
+                button.dataset.copied = true;
+                let alert = Object.assign(document.createElement("div"), {
+                    role: "status",
+                    className: "hljs-copy-alert",
+                    innerHTML: "Copied to clipboard"
+                });
+                el.parentElement.appendChild(alert);
+                setTimeout(() => {
+                    button.innerHTML = "Copy";
+                    button.dataset.copied = false;
+                    el.parentElement.removeChild(alert);
+                    alert = null
+                }, 2e3)
+            }
+
+            
+            if (typeof callback === "function") return callback(newText, el);
+            
+        }
+    
+}